在Vue中，组件通信有以下几种方式：
- Props / $emit：父组件通过给子组件传递props属性，子组件通过$emit事件将数据传递给父组件。适用于父组件向子组件传递数据。
- 自定义事件：父组件通过$on监听子组件触发的事件，子组件通过$emit触发事件。适用于子组件向父组件传递数据或触发某些操作。
- $refs：父组件通过ref属性获取子组件的实例，从而调用子组件的方法或获取子组件的数据。
- $parent / $children：通过$parent属性获取父组件实例，通过$children属性获取子组件实例。可以直接访问父组件或子组件的数据和方法。
- Event Bus：通过创建一个全局的Vue实例，并使用$on、$emit等方法进行事件的监听和触发。不限制组件之间的层级关系，适用于任意组件之间的通信。
- Vuex：Vue的状态管理库，用于管理多个组件共享的状态数据。通过定义store、state、mutations等概念，实现组件之间的数据共享与通信。
适用场景：
- Props / $emit：父子组件之间的数据传递。
- 自定义事件：兄弟组件之间的数据传递或触发操作。
- $refs：父组件获取子组件的数据或调用子组件的方法。
- $parent / $children：父子组件之间的数据传递或方法调用。
- Event Bus：任意组件之间的通信。
- Vuex：大型应用中，多个组件需要共享数据的情况。
在Vue中，组件通信可以通过props、$emit、$on和$emit等方式来实现。
- 父组件向子组件传递数据：使用props 父组件可以通过props属性将数据传递给子组件。子组件可以在props中定义接收的属性，然后通过子组件的模板中使用这些属性。
// 父组件 <template> <child-component :message="parentMsg"></child-component> </template> <script> export default { data() { return { parentMsg: 'Hello from parent' } } } </script> // 子组件 <template> <div>{{ message }}</div> </template> <script> export default { props: ['message'] } </script>
- 子组件向父组件传递数据：使用$emit 子组件可以使用$emit方法触发一个自定义事件，并传递数据给父组件。父组件可以在模板中监听这个自定义事件，并处理传递的数据。
// 子组件 <template> <button @click="sendMessage">Send Message</button> </template> <script> export default { methods: { sendMessage() { this.$emit('message', 'Hello from child') } } } </script> // 父组件 <template> <child-component @message="handleMessage"></child-component> </template> <script> export default { methods: { handleMessage(msg) { console.log(msg) // 输出：Hello from child } } } </script>
- 兄弟组件之间传递数据：使用事件总线 可以创建一个Vue实例作为事件总线，兄弟组件通过事件总线来通信。
// EventBus.js import Vue from 'vue' export default new Vue() // 组件A <template> <div> <button @click="sendMessage">Send Message</button> </div> </template> <script> import EventBus from './EventBus' export default { methods: { sendMessage() { EventBus.$emit('message', 'Hello from component A') } } } </script> // 组件B <template> <div> <div>{{ message }}</div> </div> </template> <script> import EventBus from './EventBus' export default { data() { return { message: '' } }, created() { EventBus.$on('message', (msg) => { this.message = msg }) } } </script>
这里仅展示了Vue中几种常用的组件通信方式和应用场景的代码示例，实际应用中还可以根据具体需求选择合适的通信方式。
