Vue的组件通信

Vue的组件通信

什么是组件通信

所谓组件间的通信，实际上就是指在各个组件间，进行参数或者信息的相互传递。通信主要分为3种，父组件向子组件通信，子组件向父组件通信，任意组件间通信。
父子组件的概念：
父组件：主动发起调用的那一方。父组件一般可以给子组件传参
子组件：被调用的那一方。子组件可以接受父组件传来的参数

父到子的通信

父到子其实很简单了，就是通过props传参。
1）父组件使用子组件的时候（以标签形式调用），增加自定义属性，并传参，如：<SonCom name="lalala"></SonCom>，这里的name就是自定义属性。

2）在定义子组件的时候增加一个props属性，传入标签上的自定义属性名。
props:['name']，props是一个数组，可以传入多个属性。在渲染的时候就直接写属性名就可以了。{{name}}这样使用。

注意：如果要将props的值绑定到子组件的state上，一定要注意props传入的属性名与state里定义的键不能同名，否则会报错！

子到父的通信

原理：自定义事件+emit
步骤主要分为3步：
1)在父组件里面定义一个函数，传参为接收到的子组件的数据
2)在子组件里面调用1)里面的函数
3)在子组件的methods里面写函数，通过$emit方法发送消息

下面是一个例子，通过点击子组件的按钮发送消息给父组件，并改变父组件的内容

<!--html-->
<div id="box">
  父组件：{{parm}}
  <!--第二步：在子组件里写自定义事件调用-->
   <sub-com @sendm="changem"></sub-com>
</div>

//javascript
  Vue.component('sub-com',{
      template:`<p><button @click="send">向父组件发消息</button></p>`,
      methods:{
          send(){
          //第三步：通过$emit方法发送消息
              this.$emit('sendm','子组件发来的消息')
          }
      }
  })
  var v=new Vue({
      el:'#box',
      data:{
          parm:'父组件本来的数据内容'
      },
     methods:{
          changem(msg){  //第一步，定义一个接收子组件消息的函数
              this.parm=msg
          }
     }
  })

注：$emit的消息名称要和自定义事件名称一致，否则会有错。

任意组件间通信

定义一个空的中央事件总线实例（类似于中介）
var bus= new Vue()
思想：使用 bus. $emit 发送消息，bus. $on接收消息
这里也是使用两个组件来示范一下

   var bus=new Vue()   //定义中央事件总线
//组件一
   Vue.component('com1',{
      data(){
         return {
            msg:'发送来的消息'
         }
      },
      template:`<div>
                      <button @click="sendmsg()">发送消息</button>
                </div>`,
      methods:{//发送消息通过自定义事件完成
        sendmsg(){
             bus.$emit('sending',this.msg)     
             //参数一发送消息的标志（自定义名称），参数二发送的内容    
           }
      }
   })
  
//组件二
   Vue.component('com2',{
      data(){
         return {
            msg1:'原来的数据'
         }
      },
      template:`<div>
                      {{msg1}}
                </div>`,
      mounted(){  //接收消息要在$on函数里面接收
             bus.$on('sending',(msg)=>{
                   this.msg1=msg
             }) 
             //参数一接收消息标识，与发送的一致；参数二回调函数        
        }
   })

这两个组件的关系任意，都能实现通信。运行效果：

点击发送消息按钮后，数据就会变化

如果要实现相互通信，就将上述方式在各自的组件中都写一遍。也就是每个组件都要写methods和mounted方法来实现。