In Vue component development, there are three core ways of component communication: Props, Events and Slots. 1. Props is used to pass data to child components, and the type checksum default value setting can be achieved through explicit declarations; 2. Events (such as $emit) enables child components to pass information upwards, which is often used in scenarios such as button clicks or form changes; 3. Slots implements a content distribution mechanism, allowing parent components to insert HTML or components into child components, and supports advanced usage such as named slots and scoped slots.

In Vue component development, communication between components is a core issue that cannot be avoided. The three most common ways are Props, Events and Slots. They are each responsible for different scenarios, and combined use can meet most component interaction needs.

1. Props: Data channel from parent to child

Props is the bridge for passing data between parent and child components. The parent component passes values ??to the child component through the binding attribute, and the child component declares the received field through the props option.

For example, a button component may need to know whether it is currently disabled:

 <!-- ParentComponent.vue -->
<template>
  <MyButton :disabled="isSubmitDisabled" />
</template>

The child component needs to explicitly declare this prop:

 // MyButton.vue
export default {
  props: ['disabled']
}

Note: Although you can use $attrs directly without declaration, explicit declaration is clearer and convenient for type checksum default settings.

Suggested practices:

• Use object form to define props, specify type and default value
• Return default values ??using functions for complex structures such as objects or arrays
• Avoid modifying props in child components, and the parent component should be notified of changes with events.

2. Events: Subcomponents pass information upwards

When a child component wants to tell the parent component what happened, it triggers the event with $emit . For example, after clicking the button, triggering a custom event:

 // MyButton.vue
methods: {
  handleClick() {
    this.$emit('click')
  }
}

The parent component listens for this event and responds:

 <template>
  <MyButton @click="handleSubmit" />
</template>

Vue 3 also supports declaring events in <script setup> using defineEmits .

Some common scenarios include:

• Form input changes (the basics of implementation of v-model)
• Feedback after button click
• Notification of data loading completion

Tips: It is recommended to use kebab-case to naming events, so that short horizontal lines can be written in the template, such as @item-selected

3. Slots: Content distribution mechanism

Slots solves the problem of "what is rendered" rather than "what is data". It allows the parent component to insert HTML or components into a specific location in the child component.

The basic usage is as follows:

 <!-- ParentComponent.vue -->
<MyCard>
  <p>This is the slot content</p>
</MyCard>

Use <slot /> to receive in subcomponents:

 <!-- MyCard.vue -->
<template>
  <div class="card">
    <slot></slot>
  </div>
</template>

Advanced gameplay:

• Named slot: <template></template>
• Scope slot: exposes the data of child components to the parent
• Used in combination with backup content

Special note: If there are multiple slots at the same time, remember to name them clearly to avoid confusion. Some UI libraries provide default slot configuration items for easy customization.

Basically that's it. These three can handle most of the communication problems between components. What is not complicated but easy to ignore is the details, such as when to use events instead of props callbacks, or whether slots really need scope. Choosing on demand is the most important thing to keep logic clear.

The above is the detailed content of Vue Props, Events, and Slots: Component Communication. For more information, please follow other related articles on the PHP Chinese website!