Vue非父子组件通信的几种方式

1.provide和inject

provide/inject主要适用于在一些深入嵌套的组件中，子组件想要获取父组件的部分内容的情况，此时可以在父组件中使用provide来提供数据，在子组件中使用inject来获取并使用这些数据（我们可以将依赖注入看作是“长距离的 prop”）

1.1基本使用

//父组件
   data(){
     return{
       books:['javascript', 'vue', 'vite']
     }
   },
   provide(){
     return{
       name:'lili',
       age:25,
       todoLength: this.books.length
     }
   }

//子组件
   <h2>{{name}}-{{age}}</h2>
   <h2>{{todoLength.value}}</h2>
   inject:['name', 'age', 'todoLength']

• 打印结果如下：

1.2如何处理响应式数据

但是当我们父组件中的数据需要实时进行更改时，就会发现子组件不会发生相应的变化

//父组件
<button @click="btnClick">按钮</button>
methods:{
     btnClick(){
       this.books = ['javascript', 'vue']
     }
   }

• 打印结果如下：
  

点击按钮，从父组件中传入的todoLength长度仍为3，这是因为在provide中引入的this.books.length本身并不是响应式的，所以我们可以使用一些响应式的API来完成这些功能，比如computed函数。而且在调用的时候，因为computed返回的是一个ref对象，我们要取出value属性来使用。

//父组件
import {computed} from 'vue'
  export default {
    provide(){
      return{
        name:'lili',
        age:25,
        todoLength: computed(() => this.books.length)
      }
    },

<h2>{{todoLength.value}}h2>

• 打印结果如下：
  

2.全局事件总线mitt库

全局事件总线可以用于非父子组件之间的通信，如与兄弟组件或者兄弟组件的子组件进行通信。在Vue3中，我们可以使用第三方库mitt来使用全局事件总线

2.1安装mitt库,封装eventbus.js工具类

npm install mitt

import mitt from 'mitt';
const emitter = mitt();
export default emitter;

2.2在其中一个组件中触发事件

import emitter from './utils/eventbus'
export default {
  methods:{
    btnClick(){
      console.log('about发生点击');
      emitter.emit('kobe', {name:'kobe', height:198})
    }
  }
}

2.2在该组件的兄弟组件或者兄弟组件的子组件中监听该事件

import emitter from './utils/eventbus'
  export default {
    created(){
      emitter.on('kobe', (info)=>{
        console.log("best player:", info)
      })
    }
}

• 打印结果：
  

未完待续。。。