上篇文章写到了基础插槽,默认文字以及具名插槽,本文来说一下作用域插槽,有时让插槽内容能够访问子组件中才有的数据是很有用的。
作用域插槽
设想一个带有如下模板的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>

微信小程序
互联网开发,终身学习者,欢迎您的关注!