Introduction to the parent-child component value transfer function in the Vue document

Vue is a popular JavaScript framework that provides an easy and convenient way to build user interfaces. In Vue, components are the basic units for building applications. Components can be nested within other components to form a parent-child relationship. Communication between components is an important aspect of Vue applications, especially communication between parent and child components. In Vue, communication between parent and child components can be achieved by passing properties or methods through the parent component. This article will introduce the parent-child component value transfer function in the Vue document.

Parent component passes properties to child components

In Vue, properties are one of the most basic ways of communication between parent components and child components. The parent component passes properties to the child component through the child component's props option. The props option in a child component declares an array containing a list of properties that the child component can accept. Child components can then access these properties as if they were reading local state.

The following code shows how to pass properties to child components in Vue:

<template>
  <div>
    <child-component :message="parentMessage"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: "Hello from parent component"
    };
  }
};
</script>

In this example, the method of passing properties from parent components to child components is used. Among them, a property parentMessage is defined in the parent component, and then bound to the message property of the child component child-component. When a child component receives a property, the property is available within the component.

Subcomponents pass events to parent components

Another common communication method between parent and subcomponents in Vue is to pass events to parent components through subcomponents. Child components can trigger custom events through the $emit method and pass data to the parent component as parameters.

The following code shows how to implement a child component to pass events to a parent component in Vue:

<template>
  <div>
    <button @click="handleClick">Click Me</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$emit("button-clicked", "button clicked from child component");
    }
  }
};
</script>

In this example, the child component uses the click event to trigger the handleClick method, This method uses the this.$emit method to pass a custom event named button-clicked to the parent component. In the parent component, you can use the v-on directive to listen to the event and execute the callback function.

<template>
  <div>
    <child-component @button-clicked="handleButtonClick"></child-component>
    <p> Message from child component: {{ messageFromChild }}</p>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      messageFromChild: ""
    };
  },
  methods: {
    handleButtonClick(data) {
      this.messageFromChild = data;
    }
  }
};
</script>

In this example, the parent component uses the v-on directive to listen to the click event button-clicked of the child component, and uses the child component to pass it in the callback function data to update the state of the parent component.

Summary

Communication between parent and child components is an important aspect of Vue applications. In the Vue documentation, multiple ways to implement communication between parent and child components are provided. This article introduces two communication methods: parent components passing properties to child components and child components passing events to parent components. These methods allow developers to easily build complex Vue components. If you want to learn more about component communication in Vue, you can further read Vue's official documentation.

The above is the detailed content of Introduction to the parent-child component value transfer function in the Vue document. For more information, please follow other related articles on the PHP Chinese website!