Vue.js学习笔记（4）

全局组件引入，使用更方便
在main.js中使用 ‘vue.component(‘组件名’, ‘组件对象’);’

Vue.config.productionTip = false

import createApplication from './components/createApplication.vue'
import createUser from './components/createUser.vue'
import toolBar from './components/toolBar.vue'
import viewMain from './components/viewMain.vue'

Vue.component('createApplication', createApplication);
Vue.component('toolBar', toolBar);
Vue.component('viewMain', viewMain);
Vue.component('createUser', createUser);

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

父组件传输数据到子组件

   //父组件中发送数据
<template>
  <div>
    <viewMain :type="type"  v-bind:textTwo="type" textOne="父组件传值"></viewMain>
  </div>
</template>

// 子组件中接收数据

<script>
  import info from '../components/info'
  export default {
    props:['textOne', 'textTwo', 'type']
  }
</script>

全局组件之间数据传输

创建全局js文件
使用emite等

页面之间数据传输push

testParams() {
        this.$router.push({
          // 传递参数
          name:'newsDetail', query:{id:1, name:'query2'}, params:{id:2,name:'params2'}
        });
   }

接收

 created() {
        // 数据初始化 获取路由参数 
        // $route （数据） $router （功能函数）
        alert(this.$route.params.name)
        alert(this.$route.query.name)
    },