How to implement communication between parent and child components in Vue?

In Vue, components are an important part of building a user interface. They can easily decompose the interface into smaller and reusable parts. Since a page may contain multiple components, communication between components becomes important. Especially the communication between parent and child components.

Vue implements communication between parent and child components through props and $emit. This article will introduce you to both methods.

1. Props

Props are the way parent components in Vue pass data to child components. props is an array that stores data attributes to be passed to child components. In the child component, use props to receive data passed from the parent component.

Use of props: First, define props in the parent component. The code is as follows:

<template>
  <child :message="parentMsg"/>
</template>

<script>
import Child from "./Child.vue";
export default {
  data() {
    return {
      parentMsg: "父组件的数据",
    };
  },
  components: {
    Child,
  },
  props: ["parentMsg"], //在父组件中定义props
};
</script>

In the above code, the parent component passes a message named message to the child component through props. properties.

Then, receive props in the child component:

<template>
  <h2 id="message">{{ message }}</h2>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      required: true, //props接收的属性必须有值
    },
  },
};
</script>

In the child component, the message attribute passed by the parent component is received through props.

At this time, the value "parent component data" will be displayed on the parent component's page.

2. $emit

$emit is the way for sub-components in Vue to transmit messages to parent components. When certain events occur in a child component, the event method of the parent component can be triggered through $emit. The first parameter of the $emit method is the name of the event to be triggered, and the second parameter is the parameter to be passed to the parent component.

Usage of $emit: First, define an event method in the child component. When an event is triggered, call the $emit method to pass the message to the parent component. The code is as follows:

<template>
  <button @click="onClick">点击传递消息到父组件</button>
</template>

<script>
export default {
  methods: {
    onClick() {
      this.$emit("child-msg", "子组件的数据");
    },
  },
};
</script>

In the above code, the child component defines the onClick event method. When the button is clicked, the event named child-msg will be triggered through the $emit method and the "child component data" parameter will be passed.

Then, listen to this event in the parent component:

<template>
  <div>
    <div>{{ message }}</div>
    <child @child-msg="getChildMsg"></child>
  </div>
</template>

<script>
import Child from "./Child.vue";
export default {
  data() {
    return {
      message: "",
    };
  },
  components: {
    Child,
  },
  methods: {
    getChildMsg(msg) {
      this.message = msg; //监听子组件的事件，获取传递过来的参数
    },
  },
};
</script>

In the above code, the parent component uses the @ symbol to listen to the event of the child component. Once the child component triggers the child-msg event, the parent component responds to the event and receives the data passed by the child component through the getChildMsg method, and then displays the data on the page.

Through the above two methods, communication between parent and child components can be achieved in Vue. The code is concise, easy to understand and easy to maintain, which can improve the efficiency of component development.

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