slot 插槽的作用域用法(摘自vue.js 官网)
有的时候你希望提供的组件带有一个可从子组件获取数据的可复用的插槽。例如一个简单的 <todo-list>
组件的模板可能包含了如下代码:
<ul>
|
但是在我们应用的某些部分,我们希望每个独立的待办项渲染出和 todo.text
不太一样的东西。这也是作用域插槽的用武之地。
为了让这个特性成为可能,你需要做的全部事情就是将待办项内容包裹在一个 <slot>
元素上,然后将所有和其上下文相关的数据传递给这个插槽:在这个例子中,这个数据是 todo
对象:
<ul>
|
现在当我们使用 <todo-list>
组件的时候,我们可以选择为待办项定义一个不一样的 <template>
作为替代方案,并且可以通过 slot-scope
特性从子组件获取数据:
<todo-list v-bind:todos="todos">
|
在 2.5.0+,
slot-scope
不再限制在<template>
元素上使用,而可以用在插槽内的任何元素或组件上。
解构 slot-scope
如果一个 JavaScript 表达式在一个函数定义的参数位置有效,那么这个表达式实际上就可以被 slot-scope
接受。也就是说你可以在支持的环境下 (单文件组件或现代浏览器),在这些表达式中使用 ES2015 解构语法。例如:
<todo-list v-bind:todos="todos">
|
这会使作用域插槽变得更干净一些。