<!-- 模板 子组件 xxx.vue -->
<template>
<div>
<slot></slot>
</div>
</template>
<!-- 使用 父组件 App.vue -->
<template>
<div>
<xxx>
<span>这里是内容</span>
</xxx>
</div>
</template>
<span>这里是内容</span> 对应着 <slot></slot> 这里是默认插槽
具名插槽？当然是有名字的插槽啦。
<!-- 模板 子组件 xxx.vue -->
<template>
<div>
<slot name="ccc"></slot>
<slot name="aaa"></slot>
</div>
</template>
<!-- 使用 父组件 App.vue -->
<template>
<div>
<xxx>
<span slot="ccc">这里是内容ccc</span>
<span slot="aaa">这里是内容aaa</span>
</xxx>
</div>
</template>
使用slot对应<slot></solt>标签中的name。 拗口？
理解成 slot="ccc" 对应着 name="ccc"
slot-scope
<!-- 子组件 -->
<template>
<div class="child">
// 作用域插槽
<slot :data="data"></slot>
</div>
</template>
export default {
data: function(){
return {
data: 'luoshushu'
}
}
}
<!-- 父组件 -->
<child>
<span slot-scope="user">{{user.data}}</span>
<!-- 渲染出luoshushu -->
</child>
