Vue中的默认插槽详解

在这里插入图片描述

在 Vue 中，插槽（Slot）是一种非常强大且灵活的机制，用于在组件中插入内容。Vue 提供了两种类型的插槽：默认插槽（Default Slot）和具名插槽（Named Slot）。我将重点解释默认插槽，并提供两个案例代码进行演示。

默认插槽（Default Slot）

默认插槽是在父组件中传递内容给子组件时使用的一种方式。当子组件内部没有具名插槽时，传递给子组件的内容将被放置在默认插槽中。

1. 基本用法

让我们首先创建一个简单的组件 MyComponent，它包含一个默认插槽。在组件中，我们使用 <slot></slot> 标签定义默认插槽的位置。

<!-- MyComponent.vue -->
<template>
  <div>
    <h2>My Component</h2>
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'MyComponent'
}
</script>

现在，在父组件中，我们可以将内容传递给默认插槽。

<!-- ParentComponent.vue -->
<template>
  <div>
    <my-component>
      <p>This content will go into the default slot.</p>
    </my-component>
  </div>
</template>

<script>
import MyComponent from './MyComponent.vue';

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

2. 插槽中使用数据

默认插槽也可以包含动态的数据。让我们修改 MyComponent，使其在插槽中显示父组件传递的数据。

<!-- MyComponent.vue -->
<template>
  <div>
    <h2>My Component</h2>
    <slot></slot>
    <p>Data from parent: {{ dataFromParent }}</p>
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  props: {
    dataFromParent: String
  }
}
</script>

现在，我们可以在父组件中传递数据给子组件。

<!-- ParentComponent.vue -->
<template>
  <div>
    <my-component :dataFromParent="message">
      <p>This content will go into the default slot.</p>
    </my-component>
  </div>
</template>

<script>
import MyComponent from './MyComponent.vue';

export default {
  components: {
    MyComponent
  },
  data() {
    return {
      message: 'Hello from parent!'
    };
  }
}
</script>