How to implement communication between sibling components in Vue?

Vue is a progressive framework for building user interfaces. It uses componentization ideas to build the entire application. In Vue, each component can be developed and maintained independently, but sometimes we need to implement communication between sibling components. This article will introduce several methods to implement sibling component communication in Vue and provide code examples.

1. Using the event bus

The event bus is a simple communication method that allows components that are not directly related to communicate. In Vue, we can use an empty Vue instance as the event bus. The specific implementation steps are as follows:

1. Create an empty Vue instance as the event bus, which can be named bus, and export it to the component that requires communication.

   // bus.js
   import Vue from 'vue'
   export default new Vue()

2. In the component that requires communication, use the $emit method to trigger an event, and use the $on method to listen to the event.

   // ComponentA.vue
   import bus from 'bus.js'
   export default {
     methods: {
       handleClick() {
         bus.$emit('custom-event', data)
       }
     }
   }

   // ComponentB.vue
   import bus from 'bus.js'
   export default {
     mounted() {
       bus.$on('custom-event', this.handleEvent)
     },
     methods: {
       handleEvent(data) {
         console.log(data)
       }
     }
   }

The advantage of using the event bus is that it is simple to implement, but it is global and may lead to poor code readability and maintainability.

2. Use Vuex

Vuex is Vue’s official state management library. It provides a centralized storage for applications and can share state across components. Through Vuex, we can easily implement communication between sibling components. The specific implementation steps are as follows:

1. Install Vuex and configure it in the Vue instance.

   // main.js
   import Vuex from 'vuex'
   import Vue from 'vue'
   Vue.use(Vuex)
   
   const store = new Vuex.Store({
     state: {
       message: ''
     },
     mutations: {
       updateMessage(state, payload) {
         state.message = payload
       }
     }
   })
   
   new Vue({
     store,
     render: h => h(App)
   }).$mount('#app')

2. In components that require communication, use mapState and mapMutationsauxiliary functions to obtain and operate the state in Vuex.

   // ComponentA.vue
   import { mapState, mapMutations } from 'vuex'
   export default {
     computed: {
       ...mapState(['message'])
     },
     methods: {
       ...mapMutations(['updateMessage']),
       handleClick() {
         this.updateMessage('Hello from ComponentA')
       }
     }
   }

   // ComponentB.vue
   import { mapState } from 'vuex'
   export default {
     computed: {
       ...mapState(['message'])
     }
   }

The advantage of using Vuex is that it provides a centralized state management mechanism to facilitate communication and state management between components. But it needs to be introduced throughout the application and the state needs to be maintained.

3. Use $parent and $children attributes

In Vue, each component instance has $parent and $children attributes, They enable communication between sibling components. The specific implementation steps are as follows:

1. In the parent component, pass the data to the child component.

   // ParentComponent.vue
   <template>
     <div>
       <ChildComponent :data="message"></ChildComponent>
     </div>
   </template>
   <script>
   export default {
     data() {
       return {
         message: 'Hello from ParentComponent'
       }
     }
   }
   </script>

2. In the child component, obtain the data of the parent component through the $parent attribute.

   // ChildComponent.vue
   <template>
     <div>
       <p>{{ $parent.message }}</p>
     </div>
   </template>

The advantage of using the $parent and $children properties is that it is simple to implement, but it is based on Vue's component tree structure. If the component The hierarchy is deep, may not be intuitive, and relies heavily on changes to component structure.

To sum up, we have introduced three methods to implement sibling component communication in Vue: using event bus, using Vuex and using $parent and $childrenAttributes. According to different needs and scenarios, we can choose the most suitable method to achieve communication between components.

The above is the detailed content of How to implement communication between sibling components in Vue?. For more information, please follow other related articles on the PHP Chinese website!