How to use $parent and $children to communicate between parent and child components in Vue?

How to use $parent and $children for parent-child component communication in Vue?

In Vue, components are the basic unit for building applications. In the development process, communication between components is a very common requirement. Vue provides some built-in methods to implement communication between components, including $parent and $children.

$parent refers to the parent component of the current component, and $children refers to all child components of the current component. Through them, we can pass data and call methods between parent and child components.

Next, we will use a simple example to demonstrate how to use $parent and $children for parent-child component communication.

First, we need to create a parent component and a child component. In the parent component, we will create a data property and pass it to the child component. The child component will modify this data and pass the modified data back to the parent component.

The code of the parent component is as follows:

<template>
  <div>
    <h2>父组件</h2>
    <p>父组件的数据：{{ parentData }}</p>
    <child-component :childData="parentData" @change="handleChange"></child-component>
  </div>
</template>

<script>
import ChildComponent from "./ChildComponent.vue"

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentData: "父组件初始数据"
    }
  },
  methods: {
    handleChange(newData) {
      this.parentData = newData
    }
  }
}
</script>

In the parent component, we pass the data of the parent component parentData to the child component ChildComponent, and pass @changeListen to the change event of the child component. When the data of the child component changes, the data of the parent component will be updated through the handleChange method.

Next, let’s take a look at the code of the child component:

<template>
  <div>
    <h4>子组件</h4>
    <p>子组件的数据：{{ childData }}</p>
    <button @click="handleClick">修改父组件数据</button>
  </div>
</template>

<script>
export default {
  props: {
    childData: {
      type: String,
      required: true
    }
  },
  methods: {
    handleClick() {
      const newData = this.childData + "（已修改）"
      this.$emit("change", newData)
    }
  }
}
</script>

In the child component, we receive the data passed by the parent component childData as props and render onto the page. When the button is clicked, the data of the child component is modified through the handleClick method, and then the change event is triggered through the $emit method, and the modified data is passed to the parent components.

So far, we have completed the data transfer and communication between parent and child components. When we render the parent component on the page, we can see that the data of the parent component and the data of the child component are displayed correctly, and when the button in the child component is clicked, the data of the parent component will be modified accordingly.

Through the above examples, we can see that using $parent and $children can easily transfer and communicate data between parent and child components. However, due to the certain coupling between parent and child components, in the actual development process, we need to choose the appropriate communication method based on specific needs and scenarios.

The above is the detailed content of How to use $parent and $children to communicate between parent and child components in Vue?. For more information, please follow other related articles on the PHP Chinese website!