Vue中组件之间的通讯

　　父子通信

1、父传子

传递：当子组件在父组中做标签使用的时候，通过给子组件绑定一个自定义属性，值为要传递的数据。

父组件中；eg:<One :val="message"/>

接收：在子组件内部通过props进行接收，props接收的方式有两种。

 

数组接收： props:["val"]
对象接收： props:{
              val:String, //接收数据的数据类型  
}，


或是 props:{
             val：{
                   type:String,
                   defaule:"##"  //默认值
             }
       }

 

2、子传父

传递：当子组件给父组件传递数据的时候，通过调用父组件给子组件绑定的自定义事件，然后将值传递过去。

接收：父组件通过自定义事件的函数来接收子组件传递过来的数据（注：这个自定义方法在绑定的时候不需要加（））

父组件给子组件绑定一个自定义方法；<One @handleTo="handleMessage">
子组件通过this.$emit触发这个方法；
methods:{
       handleSend(){
              this.$emit("handleTo",需要传递的值)
       }
}
父组件接收，通过自定义方法后面的函数接收
methods:{
       handleMessage(val){
           
       }
}

还可以通过自定义插槽完成子向父传值

给子组件内部的slot绑定一个自定义属性

 

<slot :icon="icon"></slot>

 

在父组件中，子组件标签的内部书写一个template标签，通过scope来接收子组件传递过来的数据

 

<Movie>
        <template  scope="props"> //scope接收到的数据是一个对象
                <p>{{props.icon}}</p> 
        </template>
</Movie>    

 

　　非父子

1、在Vue的原型身上添加一个公共的Vue实例，组件之间调用这个公共的实例$emit传递数据，$on接收数据

在入口文件main.js中  Vue.prototype.Observer = new Vue();

传值：methods:{
           handleSend(){
                 this.Observer.$emit("handle",要传递的值)
           }
      }
接收：created(){
         this.Observer.$on("handle",(val)=>{接收到传递过来的值val})
     }

2、上面的方法太耗费性能，我们可以直接手动封装$on、$emit、$off方法，在main.js 中引入  import  Observer  from  '   '  ；传递和接收的方法与上面一样。

3、Event Bus  4、Vuex