这篇文章主要介绍了vue中如何实现非父子组件的通信，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

Provide和Inject用于非父子组件之间共享数据，比如有一些深度嵌套的组件，子组件想要获取父组件的数据，如果不存在Provide和Inject选项，我们可以通过props进行一次传递数据，但是这样做太过于繁琐。

对于上述情况，我们可以使用Provide和Inject无论组件结构嵌套有多深，父组件都可以作为子组件数据的提供者。

父组件存在Provide来提供数据。

子组件存在Inject来获取数据。

在实际过程中，父组件不知道哪个子组件使用其数据，子组件也不知道使用的是哪个父组件的数据。

Provide和Inject的基本使用

//父组件<template><div><Content></Content></div></template><script>importContentfrom"./components/Content.vue";exportdefault{data(){return{};},provide:{name:"张三",age:20},components:{Content}};</script><stylescoped></style>

//子组件<template><div><h2>这里是Content组件</h2><h2>{{name}}--{{age}}</h2><ContentBase></ContentBase></div></template><script>importContentBasefrom"./ContentBase.vue";exportdefault{data(){return{};},components:{ContentBase},inject:["name","age"]};</script><stylescoped></style>

//孙组件<template><div><h2>这里是contentBase组件</h2><h2>{{name}}--{{age}}</h2></div></template><script>exportdefault{data(){return{};},inject:["name","age"]};</script><stylescoped></style>

最终显示结果为：

我们思考一种情况，如果Provide拿到的数据，是从data拿到的数据，此时如果获取? 此时this可以使用吗?

<template><div><Content></Content></div></template><script>importContentfrom"./components/Content.vue";exportdefault{data(){return{source:["111","222","333"]};},provide:{name:"张三",age:20,res:this.source.length//我们在此时增加res，想要通过this.source.length拿到数组的长度},components:{Content}};</script><stylescoped></style>

该结果是错误的。

报错信息显示，我们从undefined上读取属性，此时this为undefined。原因：从上面代码我们可以看出，this指向的是undefiend(因为this执行最外层)。

解决方法

我们将Provide设置为一个函数，并且返回一个对象，如下代码所示：

<template><div><Content></Content></div></template><script>importContentfrom"./components/Content.vue";exportdefault{data(){return{source:["111","222","333"],};},provide(){return{name:"张三",age:20,res:this.source.length,};},components:{Content,},};</script><stylescoped></style>

显示结果：

此时我们再思考一个问题，如果我们向data数组中新增一个元素，在其他地方获取的数组长度会跟随变化吗?

<template><div><Content></Content><button@click="addOneItem">点击</button></div></template><script>importContentfrom"./components/Content.vue";exportdefault{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><stylescoped></style>

结果如上图所示，可以看到数据是被添加进去的，但是子组件并没有检测到数据的变化。

此时我们可以使用computed来检测this.source.length的变化，使用代码如下所示。

<template><div><Content></Content><button@click="addOneItem">点击</button></div></template><script>importContentfrom"./components/Content.vue";import{computed}from"vue"//从vue中引入computedexportdefault{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><stylescoped></style>

因为我们通过computed获取的是一个对象，此时我们通过value属性拿到值。

在vue2时，如果我们使用事件总线可以使用this.$bus = new Vue(）也就是实例化一个vue对象。但是我们在vue3中不能这样用。所以我们采用第三方库来实现组件之间的通信。这个第三方库为mitt

一、安装

npminstallmitt

在文件中引入并且进行初始化导出。

importmittfrom"mitt";constemitter=newmitt()exportdefaultemitter

监听事件,第一个参数是事件名，第二个参数是回调函数。

emitter.on("why",(data)=>{console.log(data)})//*表示可以监听全部的事件。emitter.on("*",(type,data)=>{console.log(type,data)})

取消事件

//取消emitter中所有的监听emitter.all.clear()//或者//定义一个函数functiononFoo(){}emitter.on("foo",onFoo)emitter.on("foo",onFoo)

感谢你能够认真阅读完这篇文章，希望小编分享的“vue中如何实现非父子组件的通信”这篇文章对大家有帮助，同时也希望大家多多支持亿速云，关注亿速云行业资讯频道，更多相关知识等着你来学习!