深入理解 Vue 3 组件通信

在 Vue 3 中,组件通信是一个关键的概念,它允许我们在组件之间传递数据和事件。本文将介绍几种常见的 Vue 3 组件通信方法,包括 propsemitsprovideinject、事件总线以及 Vuex 状态管理。

1. 使用 propsemits 进行父子组件通信

props 传递数据

props 是父组件向子组件传递数据的一种机制。在子组件中,通过定义 props 属性来接收父组件传递的数据。

父组件 (ParentComponent.vue):

复制代码
<template>
  <ChildComponent :message="parentMessage" />
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hello from Parent Component!'
    };
  }
};
</script>

子组件 (ChildComponent.vue):

复制代码
<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      required: true
    }
  }
};
</script>
emits 传递事件

子组件可以通过 $emit 方法向父组件发送事件,从而实现从子组件向父组件传递信息。

子组件 (ChildComponent.vue):

复制代码
<template>
  <button @click="sendMessage">Send Message</button>
</template>

<script>
export default {
  emits: ['messageSent'],
  methods: {
    sendMessage() {
      this.$emit('messageSent', 'Hello from Child Component!');
    }
  }
};
</script>

父组件 (ParentComponent.vue):

复制代码
<template>
  <ChildComponent @messageSent="handleMessage" />
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleMessage(message) {
      console.log(message);
    }
  }
};
</script>

2. 使用 provideinject 进行祖孙组件通信

provideinject 允许祖父组件和孙组件之间进行通信,而不需要通过中间的父组件传递数据。

祖父组件 (GrandparentComponent.vue):

复制代码
<template>
  <ParentComponent />
</template>

<script>
import ParentComponent from './ParentComponent.vue';

export default {
  components: {
    ParentComponent
  },
  provide() {
    return {
      grandparentMessage: 'Hello from Grandparent Component!'
    };
  }
};
</script>

孙组件 (GrandchildComponent.vue):

复制代码
<template>
  <div>{{ grandparentMessage }}</div>
</template>

<script>
export default {
  inject: ['grandparentMessage']
};
</script>

3. 使用事件总线进行兄弟组件通信

事件总线是一种常见的用于兄弟组件通信的方法,通常使用 Vue 实例作为事件总线。

事件总线 (eventBus.js):

复制代码
import { reactive } from 'vue';

const eventBus = reactive({});
export default eventBus;

组件 A (ComponentA.vue):

复制代码
<template>
  <button @click="sendMessage">Send Message to Component B</button>
</template>

<script>
import eventBus from './eventBus.js';

export default {
  methods: {
    sendMessage() {
      eventBus.message = 'Hello from Component A!';
    }
  }
};
</script>

组件 B (ComponentB.vue):

复制代码
<template>
  <div>{{ message }}</div>
</template>

<script>
import { reactive, toRefs } from 'vue';
import eventBus from './eventBus.js';

export default {
  setup() {
    const state = reactive({
      message: ''
    });

    state.message = eventBus.message;

    return {
      ...toRefs(state)
    };
  }
};
</script>
相关推荐
蜚鸣3 天前
Vue的快速入门
vue
吃饭最爱4 天前
⽹络请求Axios的概念和作用
vue
魂尾ac4 天前
Django + Vue3 前后端分离技术实现自动化测试平台从零到有系列 <第一章> 之 注册登录实现
后端·python·django·vue
是罐装可乐5 天前
深入理解 Vue3 Router:三种路由模式的工作原理与实战应用
架构·vue·路由·history·hash·ssr·router
老华带你飞5 天前
租房平台|租房管理平台小程序系统|基于java的租房系统 设计与实现(源码+数据库+文档)
java·数据库·小程序·vue·论文·毕设·租房系统管理平台
zhz52145 天前
Spring Boot + Redis 缓存性能优化实战:从5秒到毫秒级的性能提升
java·spring boot·redis·缓存·vue
小胖墩有点瘦6 天前
【基于协同过滤的校园二手交易平台】
java·vue·毕业设计·springboot·计算机毕业设计·协同过滤·校园二手交易平台
小圣贤君6 天前
小说创作中的时间轴体验设计:事序图交互与用户体验优化
electron·vue·甘特图·时序图·写作软件
知识分享小能手7 天前
React学习教程,从入门到精通,React 构造函数(Constructor)完整语法知识点与案例详解(16)
前端·javascript·学习·react.js·架构·前端框架·vue
@AfeiyuO7 天前
分类别柱状图(Vue3)
typescript·vue·echarts