小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

1、父组件给子组件传递数据和方法

（1）父组件调用子组件的时候绑定动态属性

<v-header :title="title" :run="run"><-header>

（2）在子组件里面通过 props接收父组件传过来的数据和方法

2、父组件主动获取子组件数据和方法

（1）调用子组件时定义一个ref

<v-header ref='header'></v-header>

（2）在父组件通过以下方法调用子组件方法和数据

this.$refs.header.属性this.$refs.header.方法

3、子组件主动获取子组件数据和方法

this.$parent.属性this.$parent.方法

4、非父子组件传值

（1）创建公共实例文件bus.js，作为公共数控中央总线

import Vue from "vue";export default new Vue();

（2）第一个组件first.vue\

import Bus from '../bus.js';
export default {  
    name: 'first',  
    data () {   
        return {      
            value: '我来自first.vue组件！'    
                }  
            },  
methods:{    
     add(){
     // 定义add方法，并将msg通过txt传给second组件      
     Bus.$emit('txt',this.value);    
      } 
    }
}

（2）第二个组件second.vue

import Bus from '../bus.js';
export default {  
name: 'second', 
    data () {   
        return {}  
    },  
    mounted:function(){    
        Bus.$on('txt',function(val){
        //监听first组件的txt事件      
        console.log(val);    
        });  
    }
}

5、vue路由配置

（1）安装

npm install vue-router  --save   / cnpm install vue-router  --save

（2）引入并 Vue.use(VueRouter) (main.js)

import VueRouter from 'vue-router'Vue.use(VueRouter)

（3）配置路由(main.js)

1）创建、引入组件(main.js)

2）定义路由（建议复制）

const routes = [       
    { path: '/foo', component: Foo },      
    { path: '/bar', component: Bar },      
    { path: '*', redirect: '/home' }   /*默认跳转路由*/   
]

3）实例化VueRouter

const router = new VueRouter({
    routes // （缩写）相当于 routes: routes      })

4)挂载

new Vue({     
    el: '#app',      
    router，     
    render: h => h(App)    
})

5)根组件的模板里面放上这句话（App.vue）

 <router-view></router-view>

6)路由跳转(App.vue）

<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>

6、路由传值方法--动态路由

（1）配置动态路由

（2）使用

（3）获取动态路由传值

7、路由传值方法--get传值

（1）配置路由

（2）使用组件和传过来的值

（3）获取get传值

8、控制台报错：

原因：

没有注册插件router

//注册插件(main.js)Vue.use(VueRouter)

vue学习笔记--4