slot的用法（Vue插槽）
slot 的用法
本博客中，子组件是son.vue ,父组件是father.vue
======================================================================================
demo1: 不使用slot（插槽）,父组件只会显示子组件的内容
// 子组件
<template>
<div class="about">我是子组件about</div>
</template>
<script>
export default {
name: 'about',
}
</script>
<style scoped>
.about {
color: red;
}
</style>
// 父组件
<template>
<div class="father">
<son>
<h2>科比</h2> // 不会 有h2 dom 结构（此时页面不会显示 科比）
</son>
</div>
</template>
<script>
// 1.引入子组件
import Son from "./common/son.vue"
export default {
// 2.注册一下
components:{
Son
}
}
</script>
<style>
</style>
======================================================================================
demo2： 子组件里面使用 slot（一个slot），在父组件里面会显示子组件 slot 里面的内容（前提是：父组件里面没有插入内容）
// 子组件
<template>
<div class="about">
我是子组件about
<slot> 父组件没有数据就显示我啦</slot>
</div>
</template>
<script>
export default {
name: 'about',
}
</script>
<style scoped>
.about {
color: red;
}
</style>
// 父组件
<template>
<div class="father">
<son>
<!-- 此时：父组件里面没有数据 --> // 会显示 子组件slot 里面的 内容
</son>
</div>
</template>
<script>
// 1.引入子组件
import Son from "./common/son.vue"
export default {
// 2.注册一下
components:{
Son
}
}
</script>
<style>
</style>
======================================================================================
demo3： 父组件插入内容 会覆盖子组件 <slot></slot> 里面的内容
// 子组件
<template>
<div class="about">
我是子组件about
<slot> 父组件没有数据就显示我啦</slot>
</div>
</template>
<script>
export default {
name: 'about',
}
</script>
<style scoped>
.about {
color: red;
}
</style>
// 父组件
<template>
<div class="father">
<son>
覆盖子组件slot里面内容
</son>
</div>
</template>
<script>
// 1.引入子组件
import Son from "./common/son.vue"
export default {
// 2.注册一下
components:{
Son
}
}
</script>
<style>
</style>
======================================================================================
demo4：多个插槽也叫做具名插从；通过子组件的 多个 <slot></slot> 不同 name属性 插入到指定位置
// 子组件
<template>
<div class="about">
我是子组件about
<slot name="slot1">1</slot>
<slot name="slot2">2</slot>
</div>
</template>
<script>
export default {
name: 'about',
}
</script>
<style scoped>
.about {
color: red;
}
</style>
<template>
<div class="father">
<son>
<div slot="slot2">覆盖子组件slot里面内容1</div>
<div slot="slot1">覆盖子组件slot里面内容2</div>
</son>
</div>
</template>
<script>
// 1.引入子组件
import Son from "./common/son.vue"
export default {
// 2.注册一下
components:{
Son
}
}
</script>
<style>
</style>
