在 Vue.js 中，跨组件通信可以通过以下几种方式实现：父子通信：通过 props 传递数据或事件触发。祖先-后代通信：通过 provide/inject 共享数据源。兄弟组件通信：通过事件总线、Vuex 状态管理或自定义事件。
Vue 中如何跨组件通信？
简介：
在 Vue.js 应用程序中，跨组件通信至关重要，以共享数据和事件。以下是实现跨组件通信的几种方法：
父子通信：
- 通过属性传递数据：父组件将数据作为 prop 传递给子组件，子组件使用 v-bind 来绑定数据。
- 通过事件触发：子组件触发一个事件，并传递数据给父组件，父组件在父组件的模板中监听事件。
祖先-后代通信：
立即学习“前端免费学习笔记（深入）”；
- 通过 provide/inject：祖先组件提供一个数据源，后代组件通过 inject 来获取数据。
兄弟组件通信：
- 通过 Event Bus：创建一个 Vue 实例来充当事件总线，所有组件都可以监听和触发事件。
- 通过 Vuex 状态管理：使用 Vuex 状态管理库，存储全局状态并让所有组件访问。
自定义事件：
- 通过 $emit/$on：在子组件中通过 $emit 触发自定义事件，在父组件中通过 $on 监听事件。
属性传递示例：
<code class="HTML"><!-- 父组件 --> <template> <Child-Component :message="message" /> </template></code>
<code class="HTML"><!-- 子组件 -->
<template>
<div>{{ message }}</div>
</template></code>通过事件触发示例：
<code class="HTML"><!-- 子组件 -->
<template>
<button @click="emitMessage">触发事件</button>
</template>
<script>
export default {
methods: {
emitMessage() {
this.$emit('message', '事件数据');
}
}
};
</script></code><code class="HTML"><!-- 父组件 -->
<template>
<Child-Component @message="handleMessage" />
</template>
<script>
export default {
methods: {
handleMessage(message) {
console.log(message); // 输出：事件数据
}
}
};
</script></code> 
