这篇文章主要介绍了vue中如何实现非父子组件的通信,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。
Provide
和Inject
用于非父子组件之间共享数据,比如有一些深度嵌套的组件,子组件想要获取父组件的数据,如果不存在Provide和Inject选项,我们可以通过props进行一次传递数据,但是这样做太过于繁琐。
对于上述情况,我们可以使用Provide
和Inject
无论组件结构嵌套有多深,父组件都可以作为子组件数据的提供者。
父组件存在Provide
来提供数据。
子组件存在Inject
来获取数据。
在实际过程中,父组件不知道哪个子组件使用其数据,子组件也不知道使用的是哪个父组件的数据。
Provide和Inject的基本使用
//父组件 <template> <div> <Content></Content> </div> </template> <script> import Content from "./components/Content.vue"; export default { data() { return {}; }, provide:{ name:"张三", age:20 }, components: { Content } }; </script> <style scoped></style>
//子组件 <template> <div> <h2>这里是Content组件</h2> <h2>{{ name }} -- {{age}}</h2> <ContentBase></ContentBase> </div> </template> <script> import ContentBase from "./ContentBase.vue"; export default { data() { return {}; }, components: { ContentBase }, inject:["name", "age"] }; </script> <style scoped></style>
//孙组件 <template> <div> <h2>这里是contentBase组件</h2> <h2>{{name}} -- {{age}}</h2> </div> </template> <script> export default { data() { return {}; }, inject: ["name", "age"] }; </script> <style scoped> </style>
最终显示结果为:
我们思考一种情况,如果Provide
拿到的数据,是从data
拿到的数据,此时如果获取? 此时this
可以使用吗?
<template> <div> <Content></Content> </div> </template> <script> import Content from "./components/Content.vue"; export default { data() { return { source: ["111","222", "333"] }; }, provide:{ name:"张三", age:20, res: this.source.length //我们在此时增加res,想要通过this.source.length拿到数组的长度 }, components: { Content } }; </script> <style scoped></style>
该结果是错误的。
报错信息显示,我们从undefined上读取属性,此时this为undefined。原因:从上面代码我们可以看出,this指向的是undefiend(因为this执行最外层)。
解决方法
我们将Provide设置为一个函数,并且返回一个对象,如下代码所示:
<template> <div> <Content></Content> </div> </template> <script> import Content from "./components/Content.vue"; export default { data() { return { source: ["111", "222", "333"], }; }, provide() { return { name: "张三", age: 20, res: this.source.length, }; }, components: { Content, }, }; </script> <style scoped></style>
显示结果:
此时我们再思考一个问题,如果我们向data数组中新增一个元素,在其他地方获取的数组长度会跟随变化吗?
<template> <div> <Content></Content> <button @click="addOneItem">点击</button> </div> </template> <script> import Content from "./components/Content.vue"; export default { data() { return { source: ["111", "222", "333"], }; }, provide() { return { name: "张三", age: 20, res: this.source.length, }; }, components: { Content, }, methods:{ //在这里添加点击事件 addOneItem() { this.source.push("nnn") console.log(this.source) } } }; </script> <style scoped></style>
结果如上图所示,可以看到数据是被添加进去的,但是子组件并没有检测到数据的变化。
此时我们可以使用computed
来检测this.source.length
的变化,使用代码如下所示。
<template> <div> <Content></Content> <button @click="addOneItem">点击</button> </div> </template> <script> import Content from "./components/Content.vue"; import { computed } from "vue" //从vue中引入computed export default { data() { return { source: ["111", "222", "333"], }; }, provide() { return { name: "张三", age: 20, res: computed(() => this.source.length), //在这里添加computed }; }, components: { Content, }, methods:{ addOneItem() { this.source.push("nnn") console.log(this.source) } } }; </script> <style scoped></style>
因为我们通过computed
获取的是一个对象,此时我们通过value
属性拿到值。
在vue2时,如果我们使用事件总线可以使用this.$bus = new Vue()也就是实例化一个vue对象。但是我们在vue3中不能这样用。所以我们采用第三方库来实现组件之间的通信。这个第三方库为mitt
一、安装
npm install mitt
在文件中引入并且进行初始化导出。
import mitt from "mitt"; const emitter = new mitt() export default emitter
监听事件,第一个参数是事件名,第二个参数是回调函数。
emitter.on("why", (data) => { console.log(data) }) //*表示可以监听全部的事件。 emitter.on("*", (type, data) => { console.log(type, data) })
取消事件
//取消emitter中所有的监听 emitter.all.clear() //或者 //定义一个函数 function onFoo(){} emitter.on("foo", onFoo) emitter.on("foo", onFoo)
感谢你能够认真阅读完这篇文章,希望小编分享的“vue中如何实现非父子组件的通信”这篇文章对大家有帮助,同时也希望大家多多支持亿速云,关注亿速云行业资讯频道,更多相关知识等着你来学习!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。