1.默认插槽
父组件中引用子组件标签(vc),并且在其中写其他内容
<template>
<div>
<vc>
<h1>Hello Slot</h1>
</vc>
</div>
</template>
在子组件中通过slot进行接受,将组件中的内容放置在指定位置
<template>
<div>
<h1>{{title}}</h1>
//将父组件传过来的内容放在slot标签位置
<slot></slot>
</div>
</template>
2.具名插槽
当父组件向子组件传递多个内容,则需要通过编写slot属性进行标识,在子组件通过name属性接收
父组件:
<template>
<div>
<vc>
<!-- 将原生html内容插入再 slot标签中 -->
<!-- 通过slot属性 将内容插入对应slot位置 -->
<h3 slot="one">one</h3>
<h4 slot="two">two</h4>
</vc>
</div>
</template>
子组件:
<template>
<div>
<div>
<slot name="two"></slot>
</div>
<slot name='one'></slot>
</div>
</template>
3.作用域插槽:子组件将数据传给父组件,父组件进行特定样式展现
子组件
<template>
<div>
// :xxx='xxx' 可将数据传递给父组件
<slot :info="infos">我是默认的一些内容</slot>
</div>
</template>
<script>
export default {
data() {
return {
infos:['a','b','c'],
}
},
}
</script>
父组件
<template>
<div>
<Category>
<!-- 通过scope属性接受来自子组件的数据 xxx任意 -->
<template scope="xxx">
<ul>
<li v-for="(item,index) in xxx.info" :key="index">{{item}}</li>
</ul>
</template>
</Category>
</div>
</template>