基础
也是用来进行组件间的数据传输（父传子），内容是 模板的HTML内容
进阶
1. 渲染作用域：父级组件传输动态内容，在父级组件中定义数据
2. 插槽默认值： 插槽默认值，有内容传输过来的话，则不显示
3. 具名插槽：一个组件可以有多个插槽，为不同的插槽传输不同的内容，需要具体指定的名字name。
终极
在子组件中添加数据，父组件接收，然后再是 父组件传输内容给子组件。 那么，插槽中既有 父组件内容也有子组件的内容了
插槽就这么多内容了
1.App.vue
<template>
<div>
<!-- Slots_Base v-slot="slotProps" 接收子组件传过来的数据 -->
<Slots_Base >
<!-- 3.具名插槽，必须要在 template 模块中 -->
<template v-slot:s1 >
<p>具名插槽1：slot标题1</p>
<!-- 1. 父级组件传输动态内容：在父级组件中定义数据 -->
<p>{{ message }}</p>
</template>
<!-- v-slot: 可以简写 # -->
<!-- 具名插槽 实现 父子组件相互传输数据 #s2="slotProps" -->
<template #s2="slotProps" >
<p>具名插槽2：slot标题2</p>
<!-- 1. 父级组件传输动态内容：在父级组件中定义数据 -->
<p>{{ message }}- {{ slotProps.msg }} </p>
</template>
</Slots_Base>
<!-- 普通插槽 -->
<A v-slot="slotProps">
<h3> {{ message }}- {{ slotProps.msg }}</h3>
</A>
</div>
</template>
<script>
import Slots_Base from './components/Slots_Base.vue';
import A from './components/A.vue';
export default {
data() {
return {
message: "slot内容"
}
},
components: {
Slots_Base,
A
},
}
</script>
<style lang="scss" scoped>
</style>
- 子组件1
<template>
<div>
<h3>基础插槽知识</h3>
<!-- 2.插槽默认值，有内容传输过来的话，则不显示 -->
<slot name="s1">插槽默认值，有内容传输过来的话，则不显示</slot>
<hr>
<slot name="s2" :msg="ChildMessage01"></slot>
<hr>
</div>
</template>
<script>
export default {
data() {
return {
ChildMessage01: "子组件的数据"
}
},
}
</script>
<style lang="scss" scoped>
</style>
- 子组件2
<template>
<div>
<slot :msg="ChildMessage"></slot>
</div>
</template>
<script>
export default {
data() {
return {
ChildMessage: "子组件数据"
}
},
}
</script>
<style lang="scss" scoped>
</style>