VUE3 basic tutorial: Several ways of communication between parent and child components

With the continuous development of modern front-end frameworks, more and more enterprises and developers choose to use Vue to build their user interfaces. Vue.js is a progressive framework for building user interfaces that provides a flexible development method to quickly build high-quality single-page applications.

In Vue.js, components are the core concept for building user interfaces. A Vue.js component is a self-contained, reusable code module with a life cycle. A component can be composed of many other components, which may need to communicate and interact. This article will introduce several ways to communicate between parent and child components in Vue.js.

1. Props property transfer

Props is a way to pass data from parent components to child components. In Vue.js, parent components can pass data to child components through properties. Child components can receive these properties and use these values ​​to render their own templates.

In the parent component, you can use the v-bind directive to bind the value to the props attribute of the child component:

<template>
  <div>
    <child-component :message="'Hello world'"></child-component>
  </div>
</template>

In the child component, you can receive the parent component through the props attribute Passed data:

Vue.component('child-component', {
  props: ['message'],
  template: '<div>{{ message }}</div>'
})

Through the props attribute, the data flow between the parent component and the child component can be clearly expressed. This method is a very common communication method between parent and child components in Vue.js.

2. $emit custom event

In Vue.js, each Vue instance has an event bus, and you can use $emit to trigger a custom event. Parent components can define custom events and use $emit to trigger these events in child components. Subcomponents can listen to these events through $on and perform corresponding operations.

In the parent component, you can use $emit to define a custom event:

new Vue({
  el: '#app',
  methods: {
    showMessage() {
      this.$emit('message');
    }
  }
})

In the child component, you can use $on to listen to this custom event:

Vue.component('child-component', {
  template: '<div v-on:message="showMessage">Child message</div>',
  methods: {
    showMessage() {
      // 处理点击事件
    }
  }
})

Through $emit custom events, child components can send messages to parent components to achieve communication purposes.

3. $parent/$children

In Vue.js, each component has a $parent property and a $children property. These two properties allow components to directly access their parent and child components. This method is more straightforward, but some people find it inelegant.

4. Using $refs

In Vue.js, every component has a $refs property. All registered subcomponents can be accessed using $refs. This attribute allows the parent component to directly access the child component and directly call its methods and properties.

In the parent component, you can use $refs to access the child component and call its method:

new Vue({
  el: "#app",
  methods: {
    handleClick() {
      this.$refs.childComponent.handleClick();
    }
  },
  components: {
    childComponent
  }
})

In the child component, you can define a handleClick method:

Vue.component('child-component', {
  methods: {
    handleClick() {
      // 处理点击事件
    }
  }
})

$ refs allows the parent component to directly access the methods and properties of the child component, but you need to be careful when using it because the value of $refs may be undefined.

Summary

In Vue.js, components are the core concept for building user interfaces. For communication between parent and child components, Vue.js provides a variety of methods, such as Props, custom events, $parent/$children, $refs, etc. In actual development, we need to choose an appropriate method to implement communication between components according to specific circumstances. At the same time, we can also use these methods to build more flexible and reusable components to improve development efficiency and user experience.

The above is the detailed content of VUE3 basic tutorial: Several ways of communication between parent and child components. For more information, please follow other related articles on the PHP Chinese website!