默认插槽
app.vue
- app是父组件，test是子组件
<template>
<div>
<test>
<!-- www不会显示 -->
<h1>www</h1>
</test>
</div>
</template>
<script>
import test from './components/test'
export default {
components:{test},
}
</script>
test.vue
- 要想让父组件的www显示，必须要在子组件配置slot标签，配置如下：
<template>
<div>
<slot></slot>
</div>
</template>
<script>
export default {
}
</script>
配置了slot，www可以在页面展示
www.PNG
- slot是占位标签，让app父组件里的<test>的<h1>渲染生效
具名插槽
app.vue
- app父组件给slot指定名字，如下：
<template>
<div>
<test>
<!-- 给slot取名的第一种方法 -->
<!-- slot="main" slot取名main-->
<img slot="main" src="https://www.runoob.com/images/klematis.jpg" alt="">
<h2 slot="tips">植物大战僵尸真好玩</h2>
</test>
<test>
<!-- 给slot取名的第二种方法 用template包裹 -->
<!-- template v-slot:main v-slot取名main -->
<template v-slot:main>
<video src="https://www.runoob.com/try/demo_source/mov_bbb.mp4"></video>
<h2>我们都喜欢唱歌</h2>
</template>
</test>
<test>
<h1>第三个tab</h1>
</test>
</div>
</template>
<script>
import test from './components/test'
export default {
components:{test},
}
</script>
<style>
div{
display: flex;
justify-content: space-around;
}
</style>
test.vue
- 可以根据父组件的slot名展示
<template>
<div>
<slot name="main"></slot>
<slot name="tips"></slot>
<slot></slot>
</div>
</template>
<script>
export default {
}
</script>
-
效果如下：
三个效果.PNG
实际流程如下：
slot流程.PNG
- 父组件里面的<test><h1>第三个tab</h1></test>没有取名的，在test.vue 文件里用不含name的<slot></slot>接收渲染，不然<h1>第三个tab</h1>不显示
作用域插槽
test.vue
- 把数据写在子组件，通过插槽slot把数据传递给父组件 test.vue====>>app.vue
<template>
<div >
<div>
<!-- 在slot里面写属性，这个属性可以把值传给父组件,
父组件用template slot-scope=""这个的方式接收 -->
<!-- 类似：父组件：<Demo :data="f"></Demo> 子组件用props接收-->
<slot :chi="foods"></slot>
</div>
</div>
</template>
<script>
export default {
data(){
return {
foods:['鸡蛋','豆腐','牛肉','花生']
}
}
}
</script>
App.vue
- 必要用template slot-scope=""这种固定写法接收子组件传过来的值
<template>
<div>
<test>
<!-- 要想接收子组件slot传过来的值，必要用template slot-scope=""这种固定写法
引号里面的是，子组件的slot标签体里面的自定义的属性名 -->
<template slot-scope="chi">
{{chi}}
</template>
</test>
</div>
</template>
<script>
import test from './components/test'
export default {
components:{test},
}
</script>
<style>
div{
display: flex;
justify-content: space-around;
}
</style>
-
流程图：
作用域卡槽.PNG
作用域卡槽：在test子组件的slot标签可以看着一个公共的父组件slot，父组件slot里面传值后，父组件app可以用template slot-scope接收值，可以把这个slot-scope当做一个props
大总结：
- 父组件引入子组件，在test子组件标签体里面写其它标签【例如：h1】，必须在本身的test.vue子组件文件里面用slot标签接收【例如：h1】
- test子组件里面的标签h1用属性slot="main"取了名，本身的test.vue子组件文件里面用slot标签name="main"接收
- 作用域卡槽：在test子组件的slot标签可以看着一个公共的父组件slot，父组件slot里面传值后，父组件app可以用template slot-scope接收值，可以把这个slot-scope当做一个props
