Vue2父子组件通讯

父组件传 值 给子组件

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

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

2. 在子组件里面通过 props接收父组件传过来的数据

   props:['title']
   或者
   props:{
   'title':String      
   }

3. 直接在子组件里面使用

父组件传 函数 给子组件

1. 父组件调用子组件的时候 绑定函数

   <v-header :say-hello="parentSayHello"></v-header>

   父组件的函数

   methods:{
       parentSayHello(name){
           console.log(name + "say hello");
       }
   }

2. 在子组件里面通过 props接收父组件传过来的数据

   props:{
       sayHello:{
           type: Function,
           require: false,
       },    
   }

3. 直接在子组件里面使用

   <button @click="sayHello('jack')"/>

父组件主动调用子组件属性、方法

1. 调用子组件的时候定义一个ref

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

2. 在父组件里面通过

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

子组件主动调用父组件的属性、方法

1. 直接调用

   this.$parent.数据
   this.$parent.方法

非父子组件通讯

非父子的组件通讯，可以通过Vuex来实现，另外也可定义一个全局的Vue对象，利用这个Vue的通知来通讯。