Vue 组件通讯

今天写一下组件通讯，总结一下对组件通讯的理解

组件通讯分为：一、父子通讯 二、子父通讯 三、非父子通讯

一、子父通讯

　　子父通讯主要用到 props属性

a）在子组件中添加props属性

{
  props：{
    type：数据类型  
   }      
}

b)在子模板中直接使用props（和使用data同样）

c）在父组件的组件模板中找到子组件标签，添加属性：

<子组件标签 ：自定义props名字="父组件中的data中的值"></子组件标签>

二、子父通讯

a)在子组件中找到对应的元素添加相关事件，在事件函数中触发自定义事件

{
    methods：{
        函数名（）{
             this.$emit('自定义事件名'，数据)
        }  
    }
}

b)在父组件methods中添加函数

{
   methods：{
     函数（data）{
        data就是$meit传来数据
     }
   }
}

c）在父组件组件模板中找到子组件标签添加自定义事件

<子组件标签 @自定义事件名="父组件中的函数名"></子组件标签>

三、非父子通讯

a)建立一个公共的实例（选一一个便可）

const bus = new Vue()

b)在发送数据的组件中的对应的元素上添加事件

@click="函数名"   //函数中触发自定义事件

{
  methods：{
     函数名：{
       bus.$emit('自定义事件名'，数据) 
    }
  }  
}

c)在接受数据的组件中添加created，而后监听事件的触发

created（）{
  bus.$on('自定义事件名'，（data）=>{
     data就是传来的数据  
   })  
}