vue2.0 之 slot 内容分发

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

前提：父组件模板的内容在父组件作用域内编译；子组件模板的内容在子组件作用域内编译。被分发的内容会在父作用域内编译。

一、单个插槽

// 子组件模板 child-component
<div>
<h2>我是子组件的标题</h2>
<slot>
只有在没有要分发的内容时才会显示。
</slot>
</div>// 父组件模板：
// 父组件模板中的子组件child-component中的内容渲染到slot插槽中，
// 若插槽中原有默认内容，会替换掉；
// 若子组件child-component只有一个没有属性的插槽，则父组件中的所有传入内容将被渲染在此插槽处；
// 若一个插槽都没有，则父组件模版中的子组件child-component中的内容会被丢弃<div>

<h1>我是父组件的标题</h1>
<child-component>
<p>这是一些初始内容</p>
<p>这是更多的初始内容</p>
</child-component>
</div>// 渲染结果：
<div>
<h1>我是父组件的标题</h1>
<div>
<h2>我是子组件的标题</h2>
<p>这是一些初始内容</p>
<p>这是更多的初始内容</p>
</div>
</div>

二、具名插槽

<slot> 元素用属性 name 来进一步配置如何分发内容。具名插槽将匹配内容片段中有对应 slot 特性的元素。

仍然可以有一个匿名插槽，作为默认插槽，作为找不到匹配的内容片段的备用插槽。若无默认插槽，这些找不到匹配的内容片段将被抛弃

// 子组件模板：child-component
<div class="container">
<header>
<slot name="header"></slot>
</header>
<main>
<slot></slot> //默认插槽
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div>// 父组件模板：
<div>
<h2>父组件模版标题</h2>
<child-component>
<h1 slot="header">这里可能是一个页面标题</h1>
// 为匹配到的内容，插入到默认插槽中
<p>主要内容的一个段落。</p>
<p>另一个主要段落。</p> <p slot="footer">这里有一些联系信息</p>
</child-component>
</div>// 渲染结果为：
<div>
<h2>父组件模版标题</h2>
<div class="container">
<header>
<h1>这里可能是一个页面标题</h1>
</header>
<main>
<p>主要内容的一个段落。</p>
<p>另一个主要段落。</p>
</main>
<footer>
<p>这里有一些联系信息</p>
</footer>
</div>
</div>

三、作用域插槽

v2.1.0

作用域插槽是一种特殊类型的插槽，能被传递数据。在子组件中，只需将数据传递到插槽，就可以像 props 一样传递数据。

// 子组件模板 child-component
<div class="child">
<slot text="msg from child"></slot>
</div>

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

// 父组件模板
<div class="parent">
<child-component>
<template slot-scope="props">
<span>msg from parent</span>
<span>{{ props.text }}</span>
</template>
</child-component>
</div>// 渲染成：
<div class="parent">
<div class="child">
<span>msg from parent</span>
<span>msg from child</span>
</div>
</div>

在组件开发中，Element-UI广泛使用

demo:

// 父组件模版
......其他模版代码
<list :data="listData" class="img-list">
<template scope="scope">
<div class="info">
<p>数据：{{scope}}</p>
<p>索引：{{scope.$index}}</p>
<p>姓名：{{scope.row.name}}</p>
<p>性别：{{scope.row.sex}}</p>
</div>
</template>
</list>
........其他模版代码

// 子组件模版 list
<ul>
<li v-for="(item,i) in data">
<slot :row="item" :$index="i"></slot>
</li>
</ul>js:
......
props: {
data: {
default: [],
type: Array
}
}
.....

父模版渲染后：

父组件把数据listData传递给子组件 data , 子组件通过作用域插槽把值传递给父组件scope

注意：<slot :row="item" :$index="i"></slot> 这里的属性在上面list组件调用的时候就会打印出一个对象{ "row": { "name": "张三", "sex": "男" }, "$index": 0 }

v2.5.0+

slot-scope 能被用在任意元素或组件中而不再局限于 <template>

// 子组件模版 my-list
<ul>
<slot name="item-child"
v-for="item in items"
:text="item.text">

</slot>
</ul>

// 父组件模版
<my-list :items="items">
<li
slot="item-child"
slot-scope="props"
class="my-fancy-item">
{{ props.text }}
</li>
</my-list>