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就是传来的数据 }) }