Vue 组件通信

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

组件通信分为：1、父子通信 2、子父通信 3、非父子通信

1、子父通信

　　子父通信主要用到 props属性

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

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

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

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

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

2、子父通信

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

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

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

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

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

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

3、非父子通信

a)创建一个公共的实例（选一一个即可）

const bus = new Vue()

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

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

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

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

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