单个插槽是vue的官方叫法,也可以叫它默认插槽,或者与具名插槽相对,也可以成为匿名插槽,因为它不用设置name属性
单个插槽可以放在组件的任意位置,但一个组件最多有一个该类插槽。
例子:
<template>
<div class="father">
<span>这里是父组件</span>
<child>
<div>
父组件在子组件内添加的html片段
</div>
</child>
</div>
</template>
<template>
<div class="child">
<span>这里是子组件</span>
<slot></slot>
</div>
</template>
slot标签将会被替换为父组件在该组件上添加的html片段。
具名插槽可以设置name属性,这意味着一个组件内可以有多处插槽。
例子:
<template>
<div class="father">
<span>这里是父组件</span>
<child>
<div slot="slot1">
父组件在子组件内添加的html片段
</div>
<div slot="slot2">
父组件在子组件内添加的html片段
</div>
</child>
</div>
</template>
<template>
<div class="child">
<slot name="slot1"></slot>
<span>这里是子组件</span>
<slot name="slot2"></slot>
</div>
</template>
这等效于:
<template>
<div class="father">
<span>这里是父组件</span>
<child></child>
</div>
</template>
<template>
<div class="child">
<div slot="slot1">
父组件在子组件内添加的html片段
</div>
<span>这里是子组件</span>
<div slot="slot2">
父组件在子组件内添加的html片段
</div>
</div>
</template>
对比前面两种插槽,我们可以叫它带数据的插槽。
但是作用域插槽要求,在slot上面绑定数据。也就是你得写成大概下面这个样子。
<slot :data="data"></slot>
export default {
data: function(){
return {
data: [‘zhangsan‘,‘lisi‘,‘wanwu‘,‘zhaoliu‘,‘tianqi‘,‘xiaoba‘]
}
},
}
插槽最后显示不显示是看父组件有没有在child下面写模板,像下面那样。
<child>
<div slot-scope="hht">{{hht.data}}</div>
</child>
原文:https://www.cnblogs.com/hhtqwq/p/13654797.html