Home > Article > Web Front-end > Programming tips and precautions for Vue component communication
Programming tips and precautions for Vue component communication
Vue.js is a popular JavaScript framework. Due to its simplicity, ease of use and powerful data binding capabilities, more and more developers choose it. Use Vue to develop front-end applications. In the development process of Vue, component communication is a very important topic. Good component communication can improve development efficiency and code maintainability. This article will introduce some programming skills and precautions for Vue component communication.
1. Parent-child component communication
In Vue, parent-child component communication is the most common way. The parent component passes data to the child component through props, and the child component passes data to the parent component through events.
1. Use props to pass data
Parent components can pass data to child components through props. Child components can receive data passed by parent components and perform rendering or other operations.
// 父组件 <template> <div> <child-component :message="message" /> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, data() { return { message: 'Hello Vue!' } } } </script> // 子组件 <template> <div> <p>{{ message }}</p> </div> </template> <script> export default { props: ['message'] } </script>
In the above code, the parent component passes message
to the child component through props, and the child component uses the props
option to declare the received properties.
2. Use events to pass data
The child component can trigger a custom event through the $emit
method and pass the data to the parent component. The parent component can listen to the events triggered by the child component through v-on
and obtain the passed data.
// 子组件 <template> <button @click="handleClick">点击我触发事件</button> </template> <script> export default { methods: { handleClick() { this.$emit('my-event', 'Hello Parent!') } } } </script> // 父组件 <template> <div> <child-component @my-event="handleEvent" /> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, methods: { handleEvent(message) { console.log(message) } } } </script>
In the above code, the child component triggers the my-event
event through the this.$emit
method and sends the data 'Hello Parent!'
Passed to the parent component. The parent component uses v-on
to listen to the my-event
event and calls the corresponding method to handle the event.
2. Non-parent-child component communication
In addition to parent-child component communication, sometimes we also need to communicate between non-parent-child components. Commonly used methods include using a Vue instance as a central event bus or using Vuex for state management.
1. Use a Vue instance as the central event bus
You can create a Vue instance as the central event bus. Subcomponents trigger events through this instance, and other components receive data by listening to events.
// EventBus.js import Vue from 'vue'; export const EventBus = new Vue(); // 子组件A <template> <button @click="handleClick">点击我触发事件</button> </template> <script> import { EventBus } from './EventBus.js'; export default { methods: { handleClick() { EventBus.$emit('my-event', 'Hello!') } } } </script> // 子组件B <template> <div> <p>{{ message }}</p> </div> </template> <script> import { EventBus } from './EventBus.js'; export default { data() { return { message: '' } }, mounted() { EventBus.$on('my-event', (message) => { this.message = message; }) } } </script>
In the above code, we created a Vue instance named EventBus
and implemented communication between sub-components through this instance. Subcomponent A triggers the custom event my-event
through EventBus.$emit
, and subcomponent B listens to my-event# through
EventBus.$on ##Events and update data.
// store.js import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); export default new Vuex.Store({ state: { message: '' }, mutations: { setMessage(state, message) { state.message = message; } }, actions: { updateMessage({ commit }, message) { commit('setMessage', message); } }, getters: { getMessage(state) { return state.message; } } }); // 子组件A <template> <button @click="handleClick">点击我触发事件</button> </template> <script> import { mapActions } from 'vuex'; export default { methods: { ...mapActions(['updateMessage']), handleClick() { this.updateMessage('Hello Vuex!'); } } } </script> // 子组件B <template> <div> <p>{{ message }}</p> </div> </template> <script> import { mapGetters } from 'vuex'; export default { computed: { ...mapGetters(['getMessage']), message() { return this.getMessage; } } } </script>In the above code, we use
Vuex to create a
store, including
state,
mutations,
actions and
getters. Subcomponent A updates the value of
message by calling the
updateMessage method through the
mapActionsauxiliary function. Subcomponent B obtains the value of
message through the
mapGetters auxiliary function.
In Vue component communication, parent-child component communication and non-parent-child component communication are the two most common ways. Parent-child component communication can realize data transfer and interaction through props and events. Non-parent-child component communication can be achieved by creating a Vue instance as a central event bus or using Vuex for state management. When writing Vue component communication code, we should make good use of calculated properties, avoid directly modifying props, and use $refs to obtain subcomponent instances and other techniques to improve development efficiency and code maintainability.
The above is the detailed content of Programming tips and precautions for Vue component communication. For more information, please follow other related articles on the PHP Chinese website!