Vue implements data transfer between parent and child components

introduction

In front-end development, it is a very popular framework and is favored by many developers because of its ease of learning and use. Among them, components are one of the core concepts of Vue, and data transfer between components is a common requirement in development. This article will explore how to implement data transfer between parent and child components in Vue, including props and events, to help you understand Vue's component interactions more deeply.

1. Understand the relationship between father and son component

In Vue, a parent component is a component that contains a child component, and the child component is referenced by the parent component. There are two main directions for data transmission between parent and child components:

• Passing data from parent component to child component: This method is usually usedprops。
• Passing data from child component to parent component: This can be achieved through custom events.

Next, we will learn more about these two ways of delivery and demonstrate their implementation through sample code.

2. Pass data from parent component to child component

1. Use props to pass data

propsIt is the main method in Vue for parent-child components to pass data. The parent component passes data to the child component by defining props on the child component label.

Sample code

Here is a simple example showing how to use it in a parent componentpropsPass data to subcomponents.

<!--  -->
<template>
  <div>
    <h1>Parent component</h1>
    <ChildComponent :message="parentMessage" />
  </div>
</template>

<script>
import ChildComponent from './';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hello from Parent Component!'
    };
  }
};
</script>

<!--  -->
<template>
  <div>
    <h2>Subcomponents</h2>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      required: true
    }
  }
};
</script>

Analysis

In the above code,It is the parent component, we define a name calledparentMessagedata attributes. pass<ChildComponent :message="parentMessage" />,we willparentMessagePassed to subcomponent。

exist, bypropsReceive passed data and use it in the template to display information.

3. Pass data from child components to parent components

1. Use custom events

To pass data to the parent component in the child component, we can use Vue's event mechanism. Subcomponent pass$emitThe method triggers an event, and the parent component can passv-onor@Listen to this event.

Sample code

The following is an example of implementing child components passing data to parent components.

<!--  -->
<template>
  <div>
    <h1>Parent component</h1>
    <ChildComponent @sendMessage="receiveMessage" />
    <p>Received message: {{ receivedMessage }}</p>
  </div>
</template>

<script>
import ChildComponent from './';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      receivedMessage: ''
    };
  },
  methods: {
    receiveMessage(message) {
       = message;
    }
  }
};
</script>

<!--  -->
<template>
  <div>
    <h2>Subcomponents</h2>
    <button @click="sendMessage">Send a message</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('sendMessage', 'Hello from Child Component!');
    }
  }
};
</script>

Analysis

existIn  , we define a name calledreceivedMessageThe data attribute of   is used to receive messages from subcomponents. pass@sendMessage="receiveMessage", we listened to the subcomponentChildComponentofsendMessageevent.

exist, when the button is clicked,sendMessageThe method is called, it usesthis.$emitTriggers the event and passes the message to the parent component.

4. Summary

Through the above example code, we can see that in Vue, data transfer between parent and child components is a simple and powerful feature. usepropsIt is easy to pass data from the parent component to the child component, and through custom events, the child component can return data to the parent component.

This data transfer pattern conforms to Vue's design philosophy, maintains decoupling between components, and improves the maintainability and reusability of the code. Whether building simple components or complex applications, it is very important to understand these basic communication methods.

The above is the detailed content of Vue implementing data transfer between parent and child components. For more information about data transfer of Vue parent and child components, please pay attention to my other related articles!