提示:以下是本篇文章正文内容,下面案例可供参考
4.作用域插槽
官网:有时让插槽内容能够访问子组件中才有的数据是很有用的。
整体架构参考上篇vue插槽01
有的时候会想换掉备用内容,如Wrap组件模板内容如下 :
App.vue
<Wrap>
//这里为空时填充备用内容
// {
{value}} 这里是获取不到Wrap组件中的value
</Wrap>
Wrap.vue
<h1>wrap</h1>
<slot>
这是slot标签内容备用内容{
{
value}}
</slot>
<p>这是wrap的P标签</p>
<hr />
为了让 value 在父级的插槽内容中可用,我们可以将 value 作为 元素的一个 attribute绑定上去:
注意:v-slot只能添加在template上,只有在里面接收值的可以这样直接写
App.vue
<h1>wrap</h1>
//注意v-slot只能添加在template上,只有在里面接收值的可以这样直接写
<Wrap v-slot:default="wrapValue">
{
{
wrapValue}}
<Box :title="wrapValue.data"/> //Box组件也可以获取到这个值
</Wrap>
Wrap.vue
<h1>wrap</h1>
<slot :data="value"> //进行绑定
这是slot标签内容备用内容{
{
value}}
</slot>
<hr />
<script>
export default {
data() {
return {
value: "wrap-value",
}
},
};
</script>
Box.vue
<h2>Box</h2> {
{
title}}
<script>
export default {
props: {
title: String,
}
};
</script>
解构插槽:
<Wrap v-slot:default="{data}">
{
{
data}