Detailed explanation of the working principle of Props and Emit in Vue3

What are Props?

In Vue, Props is a mechanism for passing data between components. Props plays an important role when the parent component passes data to the child component. Children components can receive the values ​​passed by the parent component through Props, thereby enabling flexible data transfer between components.

How Props Works

In Vue 3, Props is implemented in the following ways:

• Statement Props: Subcomponent passpropsOption to declare the props it expects to receive. You can specify the type, default value, and whether it is required.
• Receive Props: When a parent component uses a child component, it passes data as an attribute to the child component.
• Using Props: Subcomponent passAccess the passed data.

Example: Simple components using Props

Here is a simple example showing how to use Props to pass data between parent and child components.

// 
<template>
  <div>
    <h1>{{ title }}</h1>
    <p>author: {{ author }}</p>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      required: true
    },
    author: {
      type: String,
      default: 'unknown'
    }
  }
}
</script>

// 
<template>
  <div>
    <ChildComponent title="Props and Emit in Vue 3" author="Jane Doe" />
    <ChildComponent title="In-depth understanding" />
  </div>
</template>

<script>
import ChildComponent from './'

export default {
  components: {
    ChildComponent
  }
}
</script>

In the example above, ChildComponent receives both title and author properties via props. The author attribute has a default value, and the title attribute is required. When the parent component ParentComponent uses ChildComponent, it passes the relevant value to the child component.

What is Emit?

Emit is another mechanism in Vue that is used to implement event-driven. Through Emit, children can send events to the parent component, enabling bidirectional communication. In other words, Emit allows the child component to send messages to the parent component.

How Emit works

Emit's workflow is as follows:

• Trigger event: Use of subcomponents$emitThe method triggers a custom event and passes the data as a parameter to the parent component.
• Listen to events: When the parent component uses child components, it passesv-onor@Listen to events triggered by subcomponents and define the corresponding processing functions.
• Handle events: The parent component's handling function will perform some logic, such as updating data or triggering other operations.

Example: Event delivery using Emit

Here is an example showing the usage of Emit.

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

<script>
export default {
  methods: {
    handleClick() {
      this.$emit('buttonClicked', 'The button was clicked!  ');
    }
  }
}
</script>

// 
<template>
  <div>
    <ChildComponent @buttonClicked="handleButtonClicked" />
  </div>
</template>

<script>
import ChildComponent from './'

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleButtonClicked(message) {
      (message);
    }
  }
}
</script>

In this example,ChildComponentA name called   will be triggered when the button is clickedbuttonClickedevent.ParentComponentpass@buttonClickedListen to this event and handle the event in the corresponding method, such as printing a message.

Summarize

Props and Emit form the basis for inter-component communication in Vue 3. Props enables the parent component to easily pass data to the child component, while Emit allows the child component to feedback information to the parent component through events. This design idea makes data transmission and event processing clear and efficient, greatly improving the reusability and flexibility of components.

In elegance, Props and Emit are not only bridges between data and events, but also important tools for building maintainable and scalable applications. By understanding and mastering these basic concepts, developers can build complex front-end applications more effectively.

This is the end of this article about the detailed explanation of the working principles of Props and Emit in Vue3. For more related content on the working principles of Props and Emit, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!