Vue component communication: parent-child component communication through $parent/$children
Introduction:
In Vue development, components are the basic units that constitute applications. Component communication is the key to data transfer and interaction between components. There are many ways for components to communicate in Vue. One of the common ways is to communicate between parent and child components through $parent and $children. This article will explain in detail how to use $parent and $children for component communication, and provide code examples for better understanding and application.
1. Communication from parent component to child component through $parent
1.1 Parent component passes data to child component
In Vue, parent component binds to child component Pass data to subcomponents using specified properties. Child components can receive data passed by the parent component through props
and use it in the component itself.
The sample code is as follows:
<!-- 父组件 --> <template> <div> <child-component :message="message"></child-component> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, data() { return { message: 'Hello, child component!' }; } } </script> <!-- 子组件 --> <template> <div>{{ message }}</div> </template> <script> export default { props: ['message'] } </script>
In the parent component, pass the message
data to the child component through :message="message"
. The child component receives the data passed by the parent component and renders it in the component.
1.2 Subcomponents dispatch events to superior components
In some cases, subcomponents need to dispatch events to their parent components to notify the parent component to perform corresponding operations. Vue provides the $emit
method for dispatching custom events in child components.
The sample code is as follows:
<!-- 父组件 --> <template> <div> <child-component @childEvent="handleChildEvent"></child-component> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, methods: { handleChildEvent(payload) { // 处理子组件派发的事件 console.log(payload); } } } </script> <!-- 子组件 --> <template> <div @click="handleClick"></div> </template> <script> export default { methods: { handleClick() { // 派发自定义事件,并传递给父组件 this.$emit('childEvent', 123); } } } </script>
In the child component, the @click
method triggers the handleClick
method, and in this method, the this.$emit
dispatches custom events and passes them to the parent component. The parent component listens to custom events through @childEvent
, and handles events dispatched by the child component in the handleChildEvent
method.
2. Communicate from child components to parent components through $children
Sometimes, child components need to communicate with their direct parent components. Vue provides the $children
property to get instances of child components. Through this attribute, you can access the instance of the child component, thereby enabling the child component to communicate with the parent component.
The sample code is as follows:
<!-- 父组件 --> <template> <div> <child-component></child-component> <button @click="changeChildData">改变子组件的数据</button> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, methods: { changeChildData() { // 修改子组件的数据 this.$children[0].childData = 'Hello, parent component!'; } } } </script> <!-- 子组件 --> <template> <div>{{ childData }}</div> </template> <script> export default { data() { return { childData: 'Hello, child component!' } } } </script>
In the parent component, get the instance of the child component through this.$children[0]
, and then you can use the Properties and methods perform corresponding operations.
Conclusion:
Through the introduction of this article, I believe that readers will have a deeper understanding of component communication through $parent and $children. In actual development, according to specific business scenarios, you can choose an appropriate method for component communication to improve the maintainability and scalability of the application. Hope this article can be helpful to readers.
The above is the detailed content of Vue component communication: parent-child component communication through $parent/$children. For more information, please follow other related articles on the PHP Chinese website!