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>