vue中父子组件通信方式,vue.js父子组件间通信
本文主要详细介绍了vue的父组件和子组件之间的通信。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下，希望能帮到你。
目录
I .提供和注入II .另一种写法提供和注入III。全球事件总线mitt库概述。我们总结了亲子组件的通信方式：propemit。这里就总结一下非亲子组件的通讯方式，Vuex在这里不涉及。
如果有孙组件，我们可以通过提供和注入进行通信。
如果不是孙组件，也不是父子组件，我们可以使用Mitt全局事件总线第三方库来实现。
一、Provide和Inject
提供和注入用于在非父子组件之间共享数据。比如有一些嵌套很深的组件，子组件想要获取父组件的数据。如果Provide和Inject选项不存在，我们可以通过props一次转移数据，但是这样太繁琐了。
对于上述情况，我们可以使用提供和注入。无论组件结构嵌套有多深，父组件都可以作为子组件的数据提供者。
父组件的存在是为了提供数据。
子组件存在注入以获取数据。
在实际过程中，父组件不知道哪个子组件使用了它的数据，子组件也不知道使用了哪个父组件的数据。
Provide和Inject的基本使用
//父组件
模板
差异
内容/内容
/div
/模板
脚本
从导入内容。/components/content . vue ；
导出默认值{
data() {
return { }；
},
提供：{
姓名：张三，
年龄：20岁
},
组件：{
内容
}
};
/脚本
样式范围/样式
//子组件
模板
差异
这里的H1是内容组件/h1。
h1{{姓名} }-{ {年龄}}/h1
内容库/内容库
/div
/模板
脚本
从“”导入ContentBase。/content base . vue ；
导出默认值{
data() {
return { }；
},
组件：{
内容库
},
注入：[姓名，年龄]
};
/脚本
样式范围/样式
//孙子组件
模板
差异
这里的H1是contentBase组件/h1。
h1 { {姓名} }-{ {年龄}}/h1
/div
/模板
脚本
导出默认值{
data() {
return { }；
},
注入：[姓名，年龄]
};
/脚本
样式范围
/风格
最终显示结果为：
二、Provide和Inject的另一种写法
我们来想一个情况。如果Provide获取的数据是data获取的数据，那么此时获取呢？这个时候可以用吗？
模板
差异
内容/内容
/div
/模板
脚本
从导入内容。/components/content . vue ；
导出默认值{
data() {
返回{
来源：[111 ， 222 ， 333]
};
},
提供：{
姓名：张三，
年龄：20，
Res: this.source.length //我们此时添加Res，想通过this.source.length得到数组的长度。
},
组件：{
内容
}
};
/脚本
样式范围/样式
结果是错误的。
错误消息显示我们从undefined读取属性，而这是undefined。原因：从上面的代码我们可以看出，这指向了undefiend(因为这是执行的最外层)。
解决办法
我们将Provide设置为一个函数并返回一个对象，如下面的代码所示：
模板
差异
内容/内容
/div
/模板
脚本
从导入内容。/components/content . vue ；
导出默认值{
data() {
返回{
来源：[111 ， 222 ， 333]，
};
},
提供(){
返回{
姓名：张三，
年龄：20，
res: this.source.length，
};
},
组件：{
内容，
},
};
/脚本
样式范围/样式
显示结果：
至此，我们再来思考另一个问题。如果我们在数据数组中加入一个元素，那么在别处得到的数组长度会发生变化吗？
模板
差异
内容/内容
button @ Click= addOneItem Click/button
/div
/模板
脚本
从导入内容。/components/content . vue ；
导出默认值{
data() {
返回{
来源：[111 ， 222 ， 333]，
};
},
提供(){
返回{
姓名：张三，
年龄：20，
res: this.source.length，
};
},
组件：{
内容，
},
方法：{ //在此添加一个点击事件
addOneItem() {
this.source.push(nnn )
console.log(this.source)
}
}
};
/脚本
样式范围/样式
如上图所示，可以看出添加了数据，但是子组件并没有检测到数据的变化。
此时，我们可以使用computed来检测this.source.length的变化，代码如下。
模板
差异
内容/内容
button @ Click= addOneItem Click/button
/div
/模板
脚本
从导入内容。/components/content . vue ；
从“vue”导入{ computed }//从vue导入计算的
导出默认值{
data() {
返回{
来源：[111 ， 222 ， 333]，
};
},
提供(){
返回{
姓名：张三，
年龄：20，
RES:computed(()=this . source . length)，//在此添加Computed
};
},
组件：{
内容，
},
方法：{
addOneItem() {
this.source.push(nnn )
console.log(this.source)
}
}
};
/脚本
样式范围/样式
因为我们通过computed获得对象，所以我们通过value属性获得值。
三、全局事件总线mitt库
在vue2中，如果我们使用事件总线，我们可以使用这个。$bus=new vue()，就是实例化一个vue对象。但是在vue3里不能这样用。所以我们使用第三方库来实现组件之间的通信。这个第三方库是mitt
一、安装
npm安装手套
在文件中引入并为导出而初始化。
从“mitt”导入mitt；
const emitter=new mitt()
导出默认发射器
监听事件，第一个参数是事件名，第二个参数是回调函数。
emitter.on(why ，(data)={
console.log(数据)
})
//*表示可以监控所有事件。
emitter.on(* ，(type，data)={
console.log(类型，数据)
})
取消事件
//取消发射器中的所有监控
emitter.all.clear()
//或者
//定义一个函数
函数onFoo(){}
emitter.on(foo ，onFoo)
emitter.on(foo ，onFoo)
总结
本文到此为止。希望能帮到你，也希望你能多关注我们的更多内容！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。