vue slot slot-scope

本文详细解释了Vue.js框架中插槽(slot)的概念及其工作原理。插槽作为组件间内容分发的一种机制,其显示与否及显示形式由父组件控制,而显示位置则由子组件决定。

https://segmentfault.com/a/1190000012996217

 

插槽,也就是slot,是组件的一块HTML模板,这块模板显示不显示、以及怎样显示由父组件来决定。 实际上,一个slot最核心的两个问题这里就点出来了,是显示不显示怎样显示

由于插槽是一块模板,所以,对于任何一个组件,从模板种类的角度来分,其实都可以分为非插槽模板插槽模板两大类。
非插槽模板指的是html模板,指的是‘div、span、ul、table’这些,非插槽模板的显示与隐藏以及怎样显示由插件自身控制;插槽模板是slot,它是一个空壳子,因为它显示与隐藏以及最后用什么样的html模板显示由父组件控制。但是插槽显示的位置确由子组件自身决定,slot写在组件template的哪块,父组件传过来的模板将来就显示在哪块

### 在 Vue 3 中使用 `slot-scope` 在 Vue 3 中,`slot-scope` 的使用方式有所变化。Vue 推荐使用新的 `<template v-slot>` 语法来替代旧的 `slot-scope` 属性。这种新语法更加清晰,并且与 Vue 3 的响应式系统和 Composition API 更加兼容。 #### 使用 `v-slot` 替代 `slot-scope` 在 Vue 3 中,可以通过 `v-slot` 指令配合解构赋值的方式来访问插槽传递的数据。例如,在表格组件中渲染动态数据时: ```vue <el-table-column label="问题状态" align="center" prop="status"> <template v-slot="{ row }"> <span>{{ row.status === 0 ? '待整改' : (row.status === 1 ? '已整改' : '已关闭') }}</span> </template> </el-table-column> ``` 这种方式通过 `v-slot` 提供了一个作用域上下文,可以直接从插槽中提取所需的变量(如 `row`),并在模板中使用[^2]。 #### 默认插槽的简写语法 如果插槽名称为 `default`,可以进一步简化 `v-slot` 的写法,直接省略 `name` 部分: ```vue <template v-slot="{ row }"> <span>{{ row.status === 0 ? '待整改' : (row.status === 1 ? '已整改' : '已关闭') }}</span> </template> ``` 等价于: ```vue <template #default="{ row }"> <span>{{ row.status === 0 ? '待整改' : (row.status === 1 ? '已整改' : '已关闭') }}</span> </template> ``` 这种简写方式提高了代码的可读性和简洁性。 #### 注意事项 当使用第三方组件库(如 Element Plus)时,需要注意某些旧版本的用法可能已被弃用。例如,在 `<el-dropdown>` 组件中,使用 `slot` 属性定义下拉菜单会导致报错: ```vue <el-dropdown> <span class="el-dropdown-link"> 下拉菜单<i class="el-icon-arrow-down el-icon--right"></i> </span> <template v-slot:dropdown> <el-dropdown-menu> <el-dropdown-item>黄金糕</el-dropdown-item> <el-dropdown-item>狮子头</el-dropdown-item> <el-dropdown-item>螺蛳粉</el-dropdown-item> <el-dropdown-item disabled>双皮奶</el-dropdown-item> <el-dropdown-item divided>蚵仔煎</el-dropdown-item> </el-dropdown-menu> </template> </el-dropdown> ``` 上述写法中,去掉了 `slot` 属性并使用 `v-slot:dropdown` 明确指定插槽名称,以避免因属性弃用导致的问题[^3]。 ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值