Vue中的插槽Slot的使用说明

Vue.js 的插槽(Slot)是一种强大的功能,它允许你在父组件中定义可重用的模板,并在子组件中插入自定义内容。以下是关于 Vue 中插槽的详细使用说明和代码示例:

使用说明:

  1. 默认插槽:你可以在子组件中定义一个名为 "default" 的插槽。这是最常见的插槽类型。
  2. 具名插槽:你也可以定义具名插槽,这样你就可以在父组件中为每个插槽提供特定的内容。
  3. 作用域插槽 :在子组件中,你可以使用 v-slot 指令来定义一个作用域插槽,这个插槽可以访问子组件的数据。

代码示例:

默认插槽

子组件(ChildComponent.vue):

复制代码
`<template>
<div>
<h1>Child Component</h1>
<slot></slot> <!-- 默认插槽 -->
</div>
</template>`

父组件(ParentComponent.vue):

复制代码
`<template>
<ChildComponent>
<p>This is some content inside the Child Component.</p>
</ChildComponent>
</template>`

具名插槽

子组件(WithNamedSlots.vue):

复制代码
`<template>
<div>
<h1>Named Slots</h1>
<slot name="header"></slot> <!-- 具名插槽 -->
<slot name="footer"></slot> <!-- 具名插槽 -->
</div>
</template>`

父组件(UsingNamedSlots.vue):

复制代码
`<template>
<WithNamedSlots>
<template v-slot:header>
<h2>This is the header content.</h2>
</template>
<template v-slot:footer>
<p>This is the footer content.</p>
</template>
</WithNamedSlots>
</template>`

作用域插槽

子组件(WithScopedSlots.vue):

复制代码
`<template>
<div>
<h1>{``{ message }}</h1> <!-- 访问子组件数据 -->
<slot :message="message"></slot> <!-- 作用域插槽 -->
</div>
</template>
<script>
export default {
data() {
return { message: 'Hello from Child Component!' }; // 子组件数据
}
}
</script>`

父组件(UsingScopedSlots.vue):

复制代码
`<template>
<WithScopedSlots>
<template v-slot:default="{ message }"> <!-- 访问作用域插槽的数据 -->
<p>{``{ message }}</p> <!-- 使用作用域插槽的数据 -->
</template>
</WithScopedSlots>
</template>`
相关推荐
朕的剑还未配妥1 分钟前
vue2项目中使用markdown-it插件教程,同时解决代码块和较长单词不换行问题
前端
用户9163574409511 分钟前
LeetCode热题100——15.三数之和
javascript·算法
skykun11 分钟前
都2026年了还在说闭包吗?
javascript
清羽_ls12 分钟前
前端代码CR小知识点汇总
前端·cr
WestWong14 分钟前
基于 Web 技术栈的跨端开发模版
前端
饮水机战神14 分钟前
小程序被下架后,我连夜加了个 "安全接口"
前端·javascript
小old弟15 分钟前
小程序开发:原生 vs 跨平台框架全解析
前端
閞杺哋笨小孩20 分钟前
Vue3 点击指令(防抖 / 节流)
前端·vue.js
加油吧zkf22 分钟前
Python入门:从零开始的完整学习指南
开发语言·前端·python
柯南二号28 分钟前
【大前端】 TypeScript vs JavaScript:全面对比与实践指南
前端·javascript·typescript