【Vue】$slots 无法获取具名作用域插槽
带作用域的具名插槽无法用$slots获取$scopedSlots 可用于获取作用域插槽
·
$slots
无法获取具名作用域插槽
在使用具名作用域插槽时 v-slot:btn="{ userName }"
, 该插槽无法用 $slots
获取到, 要使用 $scopedSlots
获取
原代码
父组件
<div id="wrapper">
<testCom ref="testCom">
<p>默认插槽文本</p>
<template v-slot:btn="{ userName }">
<p>作用域插槽插入文本 {{ userName }}</p>
</template>
</testCom>
</div>
testCom
组件
const testCom = {
template:
`<div>
<h2>我是子组件 的 标题</h2>
<slot />
<slot name="btn" :userName="name" />
</div>`,
data: () => {
return {
name: 'zhangkb'
}
},
mounted() {
console.log('test',this.$slots)
}
}
- 打印出的
this.$slots
中只有default
, 没有btn
- 修改父组件中的插槽语法为
<template v-slot:btn>
时,$slots
中有具名插槽btn
- 在具名插槽带作用域的情况下
v-slot:btn="{ userName }"
, 修改打印信息为console.log('test',this.$slots)
- 修改打印信息为
console.log('test',this.$scopedSlots.btn())
vue 文档
$slots
文档如下
$scopedSlots
文档如下
结论
$slots
只能获取到 不带作用域(具名或默认)的插槽内容, 如<div>默认插槽文本</div>
或 <tamplate v-slot:btn ></template>
有作用域时, 如 <template v-slot:btn="{ userName }"></template>
, 只能用 $scopedSlots
来获取, 并且取到的是可以返回对应插槽内容的函数
$scopedSlots
中包含 $slots
的所有内容, 只是被转换成函数形式
更多推荐
所有评论(0)