vue中slot插槽的参数汇总及使用方案

小小插槽一会标签<slot></slot>,一会属性v-slot,一会#的,到底是怎么用,列个表一眼看明白。

默认插槽 具名插槽 作用域插槽
定义 <slot></slot> <slot name="header"></slot> v-bind:user="user"
使用 v-slot v-slot:header v-slot="slotProps" v-slot:default="{ user }" v-slot:other="slotProps"
缩写使用 #default #header #default="{ user }"

注意 v-slot 只能添加在 <template>

最简单的定义及使用

定义child.vue 复制代码
<button>
    <slot>这是当使用的时候没传参的时候显示的内容</slot>
</button>
使用father.vue 复制代码
<child>编辑</child>
结果: 复制代码
<button>编辑</button>

定义的child组件,如果没有写<slot></slot>那使用的时候不管<child></child>标签里面写什么内容都会丢失。

定义<slot></slot>后,如果<child></child>使用的时候里面什么都没写那渲染结果为<slot></slot>标签里面的内容。

具名插槽的使用

一个不带 name<slot> 出口会带有隐含的名字"default"。

定义child.vue 复制代码
<div class="title">
    <slot>标题位置</slot>
</div>
<div class="subtitle">
    <slot name="subTitle">这是副标题</slot>
</div>
使用father.vue 复制代码
<child>
    默认插槽,可以写template v-slot:default也可以不写
    <h3>我还能加个标签</h3>
    <template v-slot:subtitle>这是副标题</template>
    这个地方也是默认插槽里面的
</child>
结果: 复制代码
<div class="title">
    默认插槽,可以写template v-slot:default也可以不写
    <h3>我还能加个标签</h3>
    这个地方也是默认插槽里面的
</div>
<div class="subtitle">这是副标题</div>

任何没有被包裹在带有 v-slot<template> 中的内容都会被视为默认插槽的内容。

然而,如果想更明确一些,仍然可以在一个 <template> 中包裹默认插槽的内容

作用域插槽默认使用方法

父级模板里的所有内容都是在父级作用域中编译的;子模板里的所有内容都是在子作用域中编译的。

想让插槽内容能够访问子组件中才有的数据就用到了作用域

定义child.vue 复制代码
<div class="title">
    <slot v-bind:user="user">{{ user.firstName }}</slot>
    <!-- 简写:
    <slot :user="user">{{ user.firstName }}</slot> -->
</div>
<script setup>
import { reactive } from "vue";
const user = reactive({
  firstName: "Zhang",
  lastName: "San",
});
</script>

独占默认插槽的缩写语法

使用father.vue 复制代码
<child v-slot="slotProps">
    我的名字是{{ slotProps.user.lastName }}
</child>
结果: 复制代码
<div class="title">我的名字是San</div>

终级 - 作用域+命名插槽使用方法

只要出现多个插槽,请始终为所有的 插槽使用完整的基于 <template> 的语法

定义child.vue 复制代码
<div class="title">
      <slot :user="user">标题位置</slot>
</div>
<div class="subtitle">
      <slot name="subTitle" :user="user">这是副标题</slot>
</div>
<script setup>
import { reactive } from "vue";
const user = reactive({
  firstName: "Zhang",
  lastName: "San",
});
</script>
使用father.vue 复制代码
<child>
    <template v-slot="slotProps">
      有命名插槽的时候v-slot就不能写到child标签里面了 {{slotProps.user.firstName}}
    </template>
    <template v-slot:subTitle="{user}">{{user.lastName}}</template>
</child>
使用father2简写.vue 复制代码
<child>
    <template #default="{ user }">
      有命名插槽的时候v-slot就不能写到child标签里面了 {{ user.firstName }}
    </template>
    <template #subTitle="{ user: { lastName } }">{{ lastName }}</template>
  </child>
结果: 复制代码
<div class="title">有命名插槽的时候v-slot就不能写到child标签里面了 Zhang</div>
<div class="subtitle">San</div>
相关推荐
计算机-秋大田5 小时前
基于Spring Boot的兴顺物流管理系统设计与实现(LW+源码+讲解)
java·vue.js·spring boot·后端·spring·课程设计
禾苗种树6 小时前
在 Vue 3 中使用 ECharts 制作多 Y 轴折线图时,若希望 **Y 轴颜色自动匹配折线颜色**且无需手动干预,可以通过以下步骤实现:
前端·vue.js·echarts
小盼江8 小时前
水果生鲜农产品推荐系统 协同过滤余弦函数推荐水果生鲜农产品 Springboot Vue Element-UI前后端分离 代码+开发文档+视频教程
vue.js·spring boot·ui
初遇你时动了情8 小时前
react module.scss 避免全局冲突类似vue中scoped
vue.js·react.js·scss
烂蜻蜓9 小时前
Uniapp 设计思路全分享
前端·css·vue.js·uni-app·html
bin91539 小时前
DeepSeek 助力 Vue 开发:打造丝滑的二维码生成(QR Code)
前端·javascript·vue.js·ecmascript·deepseek
浪九天14 小时前
Vue 不同大版本与 Node.js 版本匹配的详细参数
前端·vue.js·node.js
尚学教辅学习资料15 小时前
基于SpringBoot+vue+uniapp的智慧旅游小程序+LW示例参考
vue.js·spring boot·uni-app·旅游
IT、木易15 小时前
跟着AI学vue第五章
前端·javascript·vue.js
薛定谔的猫-菜鸟程序员15 小时前
Vue 2全屏滚动动画实战:结合fullpage-vue与animate.css打造炫酷H5页面
前端·css·vue.js