上篇文章写到了基础插槽，默认文字以及具名插槽，本文来说一下作用域插槽，有时让插槽内容能够访问子组件中才有的数据是很有用的。
作用域插槽
设想一个带有如下模板的child组件：
- template: '<ul><slot v-for="item of list" :item="item">默认内容</slot></ul>'
父组件的内容是这样的：
- <child>
- {{item}}
- </child>
然后我们会发现上述代码不会正常工作，因为只有子组件模板内可以访问到item而我们提供的内容是在父级渲染的。因此{{item}}在这里是无效的，是没有数据的。
为了让item在父级的插槽内容可用，我们可以将item作为一个 <slot>元素的特性绑定上去：
- <slot v-for="item of list" :item="item">{{item}}</slot>
绑定在<slot>元素上的特性被称为插槽 prop。现在在父级作用域中，我们可以给v-slot带一个值来定义我们提供的插槽 prop 的名字：
- <child>
- <template v-slot:default="user">
- <li>{{user.item}}</li>
- </template>
- </child>
这样就可以成功渲染出数据，在这个例子中，我给插槽 prop 的对象命名为user，但你也可以使用任意你喜欢的名字。
注意
v-slot只能添加在一个<template>上 (有一种例外情况)，这一点和已经废弃的 slot特性不同。
完整代码
- <div id="root">
- <child>
- <template v-slot:default="user">
- <li>{{user.item}}</li>
- </template>
- </child>
- </div>
- <script>
- Vue.component('child',{
- data() {
- return {
- list: ['张三','李四','王五','赵六']
- }
- },
- template: '<ul><slot v-for="item of list" :item="item">{{item}}</slot></ul>'
- })
- var vm = new Vue({
- el: '#root'
- })
- </script>
微信小程序
互联网开发，终身学习者，欢迎您的关注！
