目标:插槽就是子组件中的提供给父组件使用的一个占位符，用 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的标签。简单理解就是子组件中留下个“坑”，父组件可以使用指定内容来补“坑”。以下举例子帮助理解。
1.普通插槽的使用
普通插槽:
1.组件内用占位
2.使用组件时组件标签中定义的标签内容代替slot(自定义标签文本等)
<!-- 父组件 -->
<template>
<div>
<h4>
<!-- 当组件中输入内容时,输入的内容代替插槽的默认值 -->
<childSlot>我是输入的内容代替插槽默认值</childSlot>
</h4>
<hr>
</div>
</template>
<!-- 子组件(child.vue) -->
<template>
<div>
<!-- 组件内slot标签内的内容当父组件不给插槽传东西时,则显示slot标签中的内容 -->
<slot>
默认显示内容
</slot>
</div>
</template>
<script>
export default {};
</script>
2.具名插槽的使用
具名插槽的使用:
1.在组件的插槽标签slot里通过 name属性自定义插槽名
2.在使用组件的主组件中定义模板标签template,在模板标签里面通过 v-slot:自定义插槽名 来调用具名插槽
<!-- 父组件 -->
<template>
<div>
<NameSlot>
<!-- 当然template标签中间可以传你需要的标签或文本内容,与普通插槽的使用一样 -->
<template v-slot:name1>我是具名插槽的文本</template>
<!-- 具名插槽的简写: 通过#代替v-slot 直接用#自定义插槽名使用对应的插槽 -->
<template #name2></template>
</NameSlot>
</div>
</template>
<script>
import childSlot from './components/childSlot.vue';
export default {
components: { childSlot },
};
</script>
<!-- 子组件(child.vue) -->
<template>
<div>
<!-- 通过slot标签的name属性给插槽起个名字,这样就能通过名字找到对应的插槽 -->
<slot name="name1">
我是具名插槽的默认显示内容2
</slot>
<slot name="name2">
我是具名插槽的简写模式
</slot>
</div>
</template>
<script>
export default {};
</script>
3.作用域插槽的使用
当想在父组件中访问子组件中才有的数据时,可以使用作用域插槽
<!-- 父组件 -->
<template>
<div>
<el-top>
<!-- 在父组件中使用作用域插槽,通过v-slot:default="传参名"来使用 -->
<!-- 普通使用格式 v-slot:插槽名="传参" -->
<template v-slot:name1="scope">
{{ scope.user.age }}
</template>
<!-- 简写格式 #插槽名="传参" -->
<template #name2="scope">
{{ scope.user.age }}
</template>
</el-top>
</div>
</template>
<script>
import elTop from './components/elTop.vue'
export default {
components:{elTop},
}
</script>
<!-- 子组件(child.vue) -->
<template>
<div>
<slot name="name1" v-bind:user="user"></slot>
<slot name="name2" v-bind:user="user"></slot>
</div>
</template>
<script>
export default {
data(){
return{
user:{
name: '作用域插槽',
age: 20
}
}
}
};
</script>
