Vue.js 中的组件通信方式详解

最新推荐文章于 2025-12-01 15:11:16 发布

api_git355

最新推荐文章于 2025-12-01 15:11:16 发布

阅读量46

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js flutter 前端前端开发

本文链接：https://blog.youkuaiyun.com/api_git355/article/details/133121273

前端开发专栏收录该内容

184 篇文章 ¥59.90 ¥99.00

订阅专栏

本文详细介绍了Vue.js中组件通信的各种方式，包括父子、子父、兄弟及跨级组件之间的通信，并提供了源代码示例。文章讨论了props、自定义事件、事件总线和Vuex状态管理在不同场景下的应用。

Vue.js 是一种流行的前端开发框架，它提供了一种简洁而强大的方式来构建用户界面。在 Vue.js 中，组件是构建应用程序的基本单元，而组件之间的通信是开发过程中的一个重要方面。本文将详细介绍 Vue.js 中各种组件通信的方式，并提供相应的源代码示例。

父子组件之间的通信
父子组件之间的通信是 Vue.js 中最常见的一种情况。父组件可以通过 props 将数据传递给子组件，子组件可以通过事件触发将数据传递回父组件。

父组件传递数据给子组件的示例代码如下：

<template>
  <div>
    <child-component :message="parentMessage"></child-component>
  </div>
</template>

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

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

子组件接收父组件数据的示例代码如下：