vue中非父子组件通信

最新推荐文章于 2024-09-04 14:17:28 发布

卖菜的小白

最新推荐文章于 2024-09-04 14:17:28 发布

阅读量2.6k

点赞数

分类专栏： vue面试文章标签： vue.js 前端 javascript eventemitter

本文链接：https://blog.youkuaiyun.com/weixin_47450807/article/details/122816146

版权

本文介绍了Vue中非父子组件的通信方式，包括使用Provide和Inject进行深度嵌套组件间的数据共享，以及利用mitt库实现全局事件总线。详细阐述了Provide/Inject的两种写法及其注意事项，同时也讨论了mitt库在vue3中作为事件总线的使用方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在上一篇博客中，我们总结了父子组件通信方式有：props + emit。这里我们将总结一下，非父子组件通信方式，这里还不涉及到Vuex。
如果存在祖孙组件，我们可以通过Provide和Inject进行通信。
如果不是祖孙组件，也不是父子组件，我们可以采用Mitt全局事件总线第三方库来实现。
一、Provide和Inject
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>
    <h1>这里是Content组件</h1>
    <h1>{
   {
    name }} -- {
   {
   age}}</h1>
    <ContentBase></ContentBase>
  </div>
</template>

<script>
import ContentBase from "./ContentBase.vue";
export default {
   
  data() {
   
    return {
   };
  },
  components: {
   
    ContentBase
  },
  inject:["name", "age"]
};

最低0.47元/天解锁文章