vue的三种通信方式

Posted 2021-02-09 zmdblog

一 确定组件关系
二 使用第一步确定的组件关系在下面找到使用方法
1 父子通信（子组件使用父组件数据渲染）

a) 在 子组件 中添加props
props: [自定义prop名字]
b) 在子组件中把自定义prop当data使用即可
c) 找到父组件模板 中的 子组件标签，添加属性
<子组件标签 :自定义prop名字="父组件data中的数据"></子组件标签>

 

2 子父通信（子组件想要发送数据给父组件时）

a) 在子组件中对应的元素上绑定相关事件，在事件函数中触发自定义事件
<元素 @click="子组件methods函数"></元素>
{
methods: {
函数 () {
this.$emit(‘自定义事件名‘, 数据)
}
}
}
b) 在父组件中的methods里添加数据处理函数
{
methods: {
处理数据函数 (data) {
data就是$emit传递过来的数据
}
}
}
c) 在父组件组件模板中找到子组件标签，然后在子组件标签上绑定自定义事件
<子组件标签 @自定义事件名="第二步中创建的函数名"></子组件标签>

 

3 非父子通信（一个组件想要传递数据到另一个组件时）

a) 创建一个公共的实例对象
const bus = new Vue()
或者
const EventHub = new Vue()
b) 在要传递数据的组件中添加methods，并给对应元素绑定事件执行该函数
{
methods: {
函数 () {
// 触发自定义事件
bus.$emit(‘自定义事件名‘, 数据)
}
}
}
<元素 @click="函数">
c) 在要接收数据的组件中添加created，在created函数中添加监听
created () {
bus.$on(‘自定义事件名‘, (data) => {
// data就是传递来的数据
})
}