Vue component communication: parent-child component communication through $parent/$children

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!