深入浅出Vue插槽slot与slot-scope
slot:分为默认插槽(没名字),具名插槽(有名字的)slot-scope:作用域插槽?为什么要用插槽,这玩意儿有什么用,一段代码一目了然父组件:<template><div><div>父</div><son>这个就是插入的内容</son></div></template>子组件:<templat
·
slot:分为默认插槽(没名字),具名插槽(有名字的)
slot-scope:作用域插槽
一、?为什么要用插槽,这玩意儿有什么用,一段代码一目了然
父组件:
<template>
<div>
<div>父</div>
<son>
这个就是插入的内容
</son>
</div>
</template>
子组件:
<template>
<div>
<div>子</div>
</div>
</template>
输出结果:很明显我们想插入的内容“这个就是插入的内容”这几个字没有展示出来。
子组件加入<slot></slot>标签:
<template>
<div>
<div>子</div>
<slot></slot>
</div>
</template>
输出结果:这样一对比就能很清楚了
二、现在再来谈谈什么叫默认插槽,具名插槽,作用域插槽。上面这种没名字的写法就叫默认插槽
2.1:具名插槽,为插槽设置一个名字,可更改指定名字插槽的内容
父组件:
<template>
<div>
<div>父</div>
<son>
<template slot="one">
<div>
新内容1
</div>
</template>
<template slot="two">
<div>
新内容2
</div>
</template>
</son>
</div>
</template>
子组件:
<template>
<div>
<div>子</div>
<slot name='one'>这个就是插入的内容1</slot>
<slot name='two'> 这个就是插入的内容2 </slot>
<slot name='three'> 这个就是插入的内容3 </slot>
</div>
</template>
输出结果:通过结果可以很明显看出来,插槽1和插槽2的内容被修改了,而3则是子组件原本的内容
三、作用域插槽,这东西为什么存在?因为父组件的东西只能在父组件用, 子组件的只能在子组件用。如果你想要在父组件用子组件data里面的数据就要使用到插槽了。
父组件:上了代码之后是否觉得有点熟悉了呢?没错element ui的table按钮就用到了这个东西
<template>
<div>
<div>父</div>
<son>
<template slot-scope="scope">
<div v-for="item in scope.data">
{{item.name}}
</div>
</template>
</son>
</div>
</template>
子组件:
<template>
<div>
<div>子</div>
<slot :data="arr"></slot>
</div>
</template>
<script>
export default {
data() {
return {
arr: [{
name: "插槽1",
},
{
name: "插槽2",
},
{
name: "插槽3",
}
]
}
},
}
</script>
输出结果:
更多推荐
已为社区贡献10条内容
所有评论(0)