Vue 组件3 作用域插槽

作用域插槽是一种特殊类型的插槽，用作使用一个（能够传递数据到）可重用模板替换已渲染元素。

在子组件中，只需将数据传递到插槽，就像你将props传递给组件一样：

<div class="child">

<slot text="hello from child"></slot>

</div>

在父级中，具有特殊属性scope的<template>元素必须存在，表示它是作用域插槽的模板。scope的值对应一个临时变量名，此变量接收从子组件中传递的props对象。

<div class="parent">

<child>

<template scope="props">

<span>hello from parent</span>

<span>{{ props.text }}</span>

</template>

</child>

</div>

如果我们渲染以上结果，得到的输出会是：

<div class="parent">

<div class="child">

<span>hello from parent</span>

<span>hello from child</span>

</div>

</div>

作用域插槽更具代表性的用例是列表组件，允许组件自定义应该如何渲染列表每一项：

<my-awesome-list :items="items">

 <!-- 作用域插槽也可以是具名的 -->

<template slot="item" scope="props">

<li class="my-fancy-item">{{ props.text }}</li>

</template>

</my-awesome-list>

列表组件的模板：

<ul>

<slot name="item"

v-for="item in items"

:text="item.text">

   <!-- 这里写入备用内容 -->

</slot>

</ul>