slot种类:
匿名插槽、具名插槽、作用域插槽
子组件ChildrenHasSlot.vue:
<template>
<div>
我是子组件ChildrenHasSlot.vue
<slot>我是默认值</slot>
<slot name="chacaoB">我是chacaoB默认值</slot>
<slot name="chacaoC" :data1="data1" :data2="data2">我是chacaoC默认值</slot>
<slot name="chacaoD" :data1="data1" :data2="data2">我是chacaoD默认值</slot>
</div>
</template>
<script>
export default {
name: "ChildrenHasSlot",
data() {
return {
data1: {
a: 111,
b: 222
},
data2: {
c: 333,
d: 444
}
}
}
}
</script>
父组件ParentDemoSlot.vue
<template>
<div>
<ChildrenHasSlot>
<!-- 匿名插槽 -->
<template v-slot:default>
<h4>这是插入'默认'插槽的内容</h4>