官方定义
vm.$slots
类型：{[name: string]: ?Array<VNode>}
- 只读
- 详细：
用来访问被插槽分发的的内容。每个具名插槽有其相应的属性。default属性包括了所有没有被包含在具名插槽中的节点或v-slot:default的内容
在使用渲染函数书写一个组件时，访问vm.slots最有帮助。
vm.$scopedSlots
类型：{[name: string]: props => Array<VNode> | undefined}
- 只读
- 详细：
用来访问作用域插槽。对于包括默认slot在内的每个插槽，该对象都包含一个返回相应VNode的函数。
vm.$scopedSlots在使用渲染函数开发一个组件时特别有用。
代码验证
组件代码
<template>
<div>
<slot name="header"></slot>
<slot></slot>
<slot name="footer"></slot>
</div>
</template>
<script>
export default {
mounted () {
console.log(this.$slots, '$slots')
console.log(this.$scopedSlots, '$scopedSlots')
}
}
</script>
实例代码
<template>
<test>
<div slot="header">slot: header</div>
<div>slot: default</div>
<div slot="footer">slot: footer</div>
</test>
</template>
<script>
import Test from './test.vue'
export default {
components: {
Test
}
}
</script>
页面显示
image.png
控制台输出
image.png
可以看到，slots则为以slot名称作为属性名的对象。
我们将实例代码修改一个地方
<template>
<test>
<div slot="header">slot: header</div>
<div slot-scope="scope">slot: {{scope}}</div>
<div slot="footer">slot: footer</div>
</test>
</template>
<script>
import Test from './test.vue'
export default {
components: {
Test
}
}
</script>
页面显示
image.png
控制台输出
image.png
可以看到，$scopedSlots有了default属性，而$slots则少了default属性。
这也说明了作用域插槽和普通插槽的区别是使用插槽时是否有slot-scope特性。
不过因为我们没有给default插槽绑定插槽prop，此时的scope是一个空对象。
我们再修改一下组件代码，给default插槽绑定特性
<template>
<div>
<slot name="header"></slot>
<slot :test="test"></slot>
<slot name="footer"></slot>
</div>
</template>
<script>
export default {
data () {
return {
test: {
name: 'default'
}
}
},
mounted () {
console.log(this.$slots, '$slots')
console.log(this.$scopedSlots, '$scopedSlots')
}
}
</script>
页面显示
image.png
可以看到此时返回的scope已经不再是空对象了，而是刚才绑定的test对象。
使用案例
在上面的代码验证部分，我们已经了解vm.$slots和vm.$scopedSlots的定义，但是如何使用vm.$slots和vm.$scopedSlots呢？
在官方定义中，官方一直强调这两个定义在使用渲染函数开发一个组件时特别有用，所以以下我们就用vue的渲染函数和JSX来写一个案例。
组件代码
<script>
export default {
props: {
data: {
type: Array,
default () {
return []
}
}
},
data () {
return {
}
},
render (h, vm) {
return (
<ul>
{this.data.map(item => (
<li>
{this.$slots.default || item.name}
</li>
))}
</ul>
)
}
}
</script>
实例代码
<template>
<test :data="data">
</test>
</template>
<script>
import Test from './test.vue'
export default {
components: {
Test
},
data () {
return {
data: [
{ name: 111 },
{ name: 222 },
{ name: 333 }
]
}
}
}
</script>
页面显示
这时我们修改一个实例代码，给组件的default插槽写入内容
<template>
<test :data="data">
<span>{{data[0].name}} | vm.$slots的使用</span>
</test>
</template>
<script>
import Test from './test.vue'
export default {
components: {
Test
},
data () {
return {
data: [
{ name: 111 },
{ name: 222 },
{ name: 333 }
]
}
}
}
</script>
页面显示
image.png
我们发现，无论我们怎么修改，页面显示的列表项都是一样的，因为我们的default插槽是一样的。
如何才能显示不同的自定义列表项呢？这时就需要用到我们的vm.$scopedSlots了。
首先修改组件代码，如下
<script>
export default {
props: {
data: {
type: Array,
default () {
return []
}
}
},
data () {
return {
}
},
render (h, vm) {
return (
<ul>
{this.data.map(item => (
<li>
{this.$scopedSlots.default(item)} // this.$scopedSlots.default是一个函数，通过传入参数可以将参数传送给作用域对象
</li>
))}
</ul>
)
}
}
</script>
再修改实例代码，如下
<template>
<test :data="data">
<span slot-scope="scope">{{scope.name}} | vm.scopedSlots的使用</span>
</test>
</template>
<script>
import Test from './test.vue'
export default {
components: {
Test
},
data () {
return {
data: [
{ name: 111 },
{ name: 222 },
{ name: 333 }
]
}
}
}
</script>
页面显示
image.png
vm.$scopedSlots和vm.$slots的理解和基本使用
