How to communicate between parent and child components in Vue

With the continuous development of front-end frameworks, Vue.js has become one of the preferred frameworks for many developers. Vue.js is a progressive JavaScript framework that provides an efficient, flexible, highly reliable, and maintainable development method. In Vue.js, components are an important concept. Whether you are implementing complex pages or building componentized applications, you need to use components to implement them.

In Vue.js, components can be nested in other components to form a parent-child component relationship. At this time, parent components and child components often need to communicate with each other to complete some complex business logic. This article will introduce how to communicate between parent and child components in Vue.js.

1. One-way data flow

In Vue.js, the parent component transmits data to the child component generally in the form of one-way data flow, that is, the parent component passes the props attribute to the child component. Data, and subcomponents cannot modify these data directly.

The parent component passes data by defining the props attribute on the child component, as shown below:

<template>
  <div>
    <!-- 父组件向子组件传递 count 数据 -->
    <child-component :count="count"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data () {
    return {
      count: 0
    }
  }
}
</script>

The data passed by the parent component is received through props in the child component, as shown below:

<template>
  <div>
    <!-- 子组件通过 props 接收 count 数据 -->
    <div>count: {{ count }}</div>
  </div>
</template>

<script>
export default {
  props: {
    count: {
      type: Number,
      default: 0
    }
  }
}
</script>

This completes the process of transmitting data from the parent component to the child component. The child component can use the received data for rendering operations, but cannot directly modify the data.

2. Subcomponent passes data to parent component

In Vue.js, subcomponent passes data to parent component through custom events. The child component triggers the event through the $emit method, and the parent component listens by adding the v-on directive to the child component to bind the event.

For example, define a button in the child component. When the button is clicked, an event is triggered and data is passed to the parent component through the $emit method, as shown below:

<template>
  <div>
    <button @click="sendData">传递数据</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendData () {
      // 通过 $emit 方法触发事件，并传递数据
      this.$emit('send-data', '这是子组件传递的数据')
    }
  }
}
</script>

In the parent component, use v- The on instruction binds events, listens to the events triggered by the sub-component, and receives the data passed by the sub-component, as shown below:

<template>
  <div>
    <!-- 绑定子组件事件，监听子组件触发的事件 -->
    <child-component @send-data="getData"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    getData (msg) {
      console.log(msg) // 打印子组件传递的数据
    }
  }
}
</script>

This completes the process of transmitting data from the sub-component to the parent component. The sub-component passes $ The emit method triggers an event and passes data, and the parent component binds the event through the v-on directive to listen and receive the data passed by the child component.

3. Use the $parent and $children attributes

In addition to the above two methods, Vue.js also provides two attributes, $parent and $children, to realize the connection between parent and child components. communication. Use the $parent property to access the data and methods of the parent component in the child component, and use the $children property to access the data and methods of the child component in the parent component.

For example, to access the data and methods of the parent component in the child component, as shown below:

<template>
  <div>
    <button @click="getParentData">获取父组件的数据</button>
  </div>
</template>

<script>
export default {
  methods: {
    getParentData () {
      // 使用 $parent 属性访问父组件的数据和方法
      console.log(this.$parent.count) // 访问父组件的 count 数据
      this.$parent.sayHello() // 调用父组件的 sayHello 方法
    }
  }
}
</script>

To access the data and methods of the child component in the parent component, you can use the $children attribute, As shown below:

<template>
  <div>
    <button @click="getChildData">获取子组件的数据</button>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    getChildData () {
      // 使用 $children 属性访问子组件的数据和方法
      console.log(this.$children[0].count) // 访问第一个子组件的 count 数据
      this.$children[0].sayHello() // 调用第一个子组件的 sayHello 方法
    }
  }
}
</script>

However, using the $parent and $children attributes for communication between parent and child components does not conform to the component communication principles of Vue.js, and is not recommended for frequent use. Because this approach will tightly couple the child component and the parent component, making it difficult to expand and maintain the code.

Summary

In Vue.js, one-way data flow and two-way binding can be achieved between parent components and child components through props and $emit methods, or you can use $parent and $ children attribute to implement communication between parent and child components. No matter which method is used, it is necessary to always consider the expansion and maintenance of component communication to avoid tight coupling, thereby making the code simpler, scalable and maintainable.

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