slot 内容分发:为了让组件可以组合,我们需要一种方式来混合父组件的内容与子组件自己的模板。
比如我们遇到组件需要相互嵌套这样的情况:
App.vue 文件
<template>
<div class="app">
<Hello>
<World></World>
<Vue></Vue>
</Hello>
</div>
</template>
Hello.vue 文件
<template>
<div class="hello">
<h3>我是 hello 组件</h3>
</div>
</template>
那这么直接写是肯定只显示 <Hello>
组件的内容
![](http://upload-images.jianshu.io/upload_images/4279446-8960bbdd71ab2dd4.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/321)
所以就需要用到 slot
插口,否则该组件标签中的内容将会被丢弃
一、 单个插槽
只需要在 Hello.vue 文件内写入 <solt></slot>
标签
<template>
<div class="hello">
<h3>我是 hello 组件</h3>
<slot>此处可自定义内容,如果该组件的标签内没有内容,则显示此内容</slot>
</div>
</template>
![](http://upload-images.jianshu.io/upload_images/4279446-9c6b73c224a717f2.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/180)
注意:
<solt></slot>
标签内是可以自定义内容的,如果在调用的<Hello></Hello>
标签内没有写入任何内容,则显示<solt></slot>
标签内的自定义内容,否则显示在调用的<Hello></Hello>
标签内写入的内容
二、多个插槽
假如我们想要改变 <Hello></Hello>
组件内 <World></World>
和 <Vue></Vue>
的显示位置,就可以用到一个特殊的特性 name 来进一步配置如何分发内容,多个插槽可以有不同的名字。具名插槽将匹配内容片段中有对应 slot 特性的元素。仍然可以有一个匿名插槽,它是默认插槽,作为找不到匹配的内容片段的备用插槽。如果没有默认插槽,这些找不到匹配的内容片段将被抛弃。
App.vue 文件
<template>
<div class="app">
<Hello>
<World slot="world"></World>
<h5>我是备用插槽内部显示的内容</h5>
<Vue slot="vue"></Vue>
</Hello>
</div>
</template>
Hello.vue 文件
<template>
<div class="hello">
<slot name="vue"></slot>
<h3>我是 hello 组件</h3>
<slot name="world"></slot>
<slot></slot>
</div>
</template>
最后渲染显示为
![](http://upload-images.jianshu.io/upload_images/4279446-a30082e0efe0cbe7.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/279)
三、作用域插槽
1. 作用域插槽是一种特殊类型的插槽,用作一个 (能被传递数据的) 可重用模板,来代替已经渲染好的元素。
在子组件中,slot 插槽还可以用作传递数据,类似于用 prop 来传递数据
在子组件 Hello.vue
中,只需要将需要传递的内容写入插槽中
<template>
<div class="hello">
<h3>我是 hello 组件</h3>
<!-- text 和 text1 是自定义的,可以随便写 -->
<slot text="我是hello" text1="组件的数据"></slot>
</div>
</template>
<slot text="我是hello" text1="组件的数据"></slot>
相当于被渲染为
{
text:'我是hello',
text1:'组件的数据'
}
在 App.vue 中调用 Hello 组件时,通过在 template 中写入 slot-scope 特殊属性来获取数据
<template>
<div class="app">
<Hello>
<!-- template 是该作用域插槽的模版, slot-scope是一个特殊属性,用来接收 hello 组件中插槽传过来的值 -->
<template slot-scope="hello">
<!-- 通过访问一个 json 的方式访问 hello 中 slot 传过来的值 -->
<span>{{hello.text}} + {{hello.text1}}</span>
</template>
</Hello>
</div>
</template>
注意:在 vue 2.5.0以上版本,就不需要用到 template 模板了,slot-scope 可以作用在任意元素中
被渲染的结果为:
![](http://upload-images.jianshu.io/upload_images/4279446-1be60052bd78dc22.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/204)
![](http://upload-images.jianshu.io/upload_images/4279446-44858020ac34658b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/700)
2. 更典型的用例是在列表组件中,允许使用者自定义如何渲染列表的每一项
在 App.vue 组件内
<template>
<div class="app">
<!-- 在子组件绑定 items 把父组件的数据传给子组件 -->
<Hello :items="items">
<li slot="item" slot-scope="bbb">
{{ bbb.text }}
</li>
</Hello>
</div>
</template>
<script>
// 引入 Hello 组件
import Hello from './assets/components/Hello.vue'
export default {
data(){
return {
items:[
{text:'aaaaaa'},
{text:'bbbbb'}
]
}
},
// 注册 Hello 组件
components:{
Hello
}
}
</script>
在 Hello.vue 组件中
<template>
<div class="hello">
<ul>
<!-- 此处的 items 为父组件传过来的数据 -->
<!-- text 为 item 内的对应数据,因为 items 是一个对象,所以要用到绑定,否则页面上直接渲染出来的内容为 item.text -->
<slot name="item" v-for="item in items" text="item.text"></slot>
</ul>
</div>
</template>
<script>
export default {
// 接收父组件传过来的 items 数据
props: ['items'],
}
</script>
渲染结果为:
![](http://upload-images.jianshu.io/upload_images/4279446-8d5e4553d19da3ea.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/190)