具名 插槽
父组件
<template lang="pug">
.home
img(alt="Vue logo" src="../assets/logo.png")
HelloWorld(msg="Welcome to Your Vue.js + TypeScript App")
h2(slot="header") 标题
p 正文内容1
div(slot="footer") 底部信息
div(slot="footer2") 底部信息2
div 正文内容2
</template>
子组件
<template lang="pug">
.hello
h1 {
{ msg }}
slot(name="header")
p For a guide and recipes on how to configure / customize this project,<br>
slot(name="footer")
slot
</template>
渲染结果
渲染规则说明:
1: 父组件指定具名 子组件无布局 --不渲染
2: 父组件无插槽的内容 默认 分发到 子组件 default(无具名) 插槽
作用域插槽
slot-scope就是作用域插槽。官方叫它作用域插槽,实际上,对比具名插槽,我们可以叫它带数据的插槽。具名插槽在组件的template里面写,作用域插槽要求,在slot上面绑定数据。
举个例子
父组件:
<template>
<div class="father">
<h3>这里是父组件</h3>
<!--第一次使用:用flex展示数据-->
<child>
<template slot-scope="user">
<div class="tmpl">
<span v-for="item in user.data">{
{item}}</span>
</div>
</template>
</child>
<!--第二次使用:用列表展示数据-->
<child>
<template slot-scope="user">
<ul>
<li v-for="item in user.data">{
{item}}</li>
</ul>
</template>
</child>
<!--第三次使用:直接显示数据-->
<child>
<template slot-scope="user">
{
{user.data}}
</template>
</child>
<!--第四次使用:不使用其提供的数据, 作用域插槽退变成匿名插槽-->
<child>
我就是模板
</child>
</div>
</template>
子组件:
<template>
<div class="child">
<h3>这里是子组件</h3>
// 作用域插槽
<slot :data="data"></slot>
</div>
</template>
export default {
data: function(){
return {
data: ['zhangsan','lisi','wanwu','zhaoliu','tianqi','xiaoba']
}
}
}
三.v-slot
从 vue2.6 开始,Vue 为具名插槽和作用域插槽引入了一个全新的语法,即v-slot 指令。目的就是想统一 slot 和 scope-slot 语法,使代码更加规范和清晰。 具体使用如下: 1.插槽的名字现在通过 v-slot:slotName 这种形式来使用,如下。
<template v-slot:header> </template>
2.此处需要注意的是, v-slot 只能添加到template上,这点Vue 2.5中的slot是不同的.
<template v-slot:slotName="data"> </template>
3.正常情况下,假设Test组件注册及组件模板如下,
//组件模板
<template id="test">
<div>
<h3>这里是test组件</h3>
<slot></slot>
</div>
</template>
//组件注册
Vue.component('Test', {
template: '#test',
data() {
return {
msg: 'Hello World!'
}
}
})
当我们需要在下面的p标签内获取Test组件数据时,可能往往写法如下
<Test>
<template v-slot:default>
<p>{
{msg}}</p>
</template>
</Test>
但是,由于组件的数据只能限于当前组件模板才能使用,所以它访问不了Test组件中的数据,为了解决这个问题,需要给组件模板中的元素上动态绑定一个对象属性,绑定到 元素上的属性我们称之为 slot props。该对象属性的名字可以自定义,而属性值就是Test组件数据的名字,这样就可以获取到Test组件中的数据,如下
<slot :msg="msg"></slot>
同时使用v-slot重构上面代码。
<Test>
<template v-slot:default="data">//此处的data就是在<slot>中绑定的属性slot props
<p>{
{data.msg}}</p>
</template>
</Test>