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

文章目录
    • 1.provide和inject
      • 1.1基本使用
      • 1.2如何处理响应式数据
    • 2.全局事件总线mitt库
      • 2.1安装mitt库,封装eventbus.js工具类
      • 2.2在其中一个组件中触发事件
      • 2.2在该组件的兄弟组件或者兄弟组件的子组件中监听该事件

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)
      })
    }
}
  • 打印结果:
    在这里插入图片描述
资料来源csdn课程-vue入门技能树中

你可能感兴趣的:(vue.js,javascript,前端)