理解
在我们的电脑主板上也有各种各样的插槽，有插CPU的，有插显卡的，有插内存的，有插硬盘的。我们可以理解slot为要占出当前的位置，方便我们插入内容。
或者可以这样理解：要去吃饭了，儿子先去占座，然后等他爸爸来了再一起吃。
slot的意思是插槽，Vue使用slot的作用是做内容分发。所谓的内容分发其实就是将父组件的内容放到子组件指定的位置叫做内容分发。
匿名插槽
- 无name属性
- 在组件中只可以使用一次
- 父组件提供样式和内容
<!--子组件-->
<template>
<div>
<slot></slot>
<h2>child子组件部分</h2>
</div>
</template>
<!-- 父组件-->
<template>
<div class="father">
<h3>这里是父组件</h3>
<chlid>
<div class="tmp1">
<span>Leaf 1</span>
<span>Leaf 2</span>
<span>Leaf 3</span>
<span>Leaf 4</span>
<span>Leaf 5</span>
</div>
</child>
</div>
</template>
<script>
import Child from '@/components/child'
export default {
components:{
child:child
}
}
</script>
<style>
.tmp1 span{
width: 50px;
height: 50px;
border: 1px solid black;
}
</style>
image.png
image.png
如果子组件没有<slot>,即使在父组件的子组件标签内容写了内容，也不会生效。子组件会直接覆盖。
所以是，slot是一个在子组件的占位符。
具名插槽
- 有name属性
- 在组件中可以使用N次
- 父组件通过html模板上的slot属性关联具名插槽
- 没有slot属性的html模板默认关联匿名模板
- 父组件提供样式和内容
<!--子组件-->
<template>
<div>
<slot name="up"></slot>
<h2>chlid子组件部分</h2>
<slot name="down"></slot>
</div>
</template>
<!--父组件-->
<template>
<div class="father">
<h3>这里是父组件</h3>
<chlid>
<div class="tmp1" slot="up">
<span>Leaf 1</span>
<span>Leaf 2</span>
<span>Leaf 3</span>
<span>Leaf 4</span>
<span>Leaf 5</span>
</div>
<div class="tmp1" slot="down">
<span>Leaf 6</span>
<span>Leaf 7</span>
<span>Leaf 8</span>
<span>Leaf 9</span>
<span>Leaf 10</span>
</div>
</child>
</div>
</template>
<script>
import Child from '@/components/child'
export default {
components:{
child:child
}
}
</script>
<style>
.tmp1 span{
width: 50px;
height: 50px;
border: 1px solid black;
}
</style>
image.png
作用域插槽（带数据的插槽）
- 父组件只提供样式，子组件提供内容
- 在slot上面绑定数据
- 子组件的值可以传给父组件使用
- 父组件展示子组件数据有3种方式：flex显示、列表显示、直接显示
- 使用slot-scope必须使用template
- scope返回的值是slot标签上返回的所有属性值，并且是一个对象的形式保存起来
- slot有两个属性，一个row,另一个是index
<!--子组件-->
<template>
<div>
<h2>chlid子组件部分</h2>
<slot :data="data"></slot>
</div>
</template>
<script>
export default {
props: ["message"],
data () {
return {
data: [''小庄','CC','小张','小林','Leaf','Bob']
}
}
}
</script>
<!--父组件-->
<template>
<div class="father">
<h3>这里是父组件</h3>
<chlid>
<!-- 第一次使用：用flex展示数据 -->
<template slot-scope="user">
<div class="tmp1">
<span v-for="(item,index) in user.data" :key="index">{{item}}</span>
</div>
</template>
<!-- 第二次使用：用列表展示数据 -->
<template slot-scope="user">
<ul>
<li v-for="(item,index) in user.data" :key="index">{{item}}</li>
</ul>
</template>
<!-- 第三次使用：直接显示 -->
<template slot-scope="user">
{{user.data}}
</template>
</child>
</div>
</template>
<script>
import Child from '@/components/child'
export default {
components:{
child:child
}
}
</script>
<style>
.tmp1 span{
width: 50px;
height: 50px;
border: 1px solid black;
}
</style>
通过3种方式显示数据的最终呈现效果分别如下：
-
span:
image.png - 列表显示
image.png
-
直接显示
image.png
父组件如果要使用这些数据必须要通过
template模板结合slot-scope来呈现。
