Named slot
Parent component
<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>Subassembly
<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>Rendering result
Rendering rules description:
1: The parent component is named and the child component has no layout-no rendering
2: The content of the parent component without a slot is distributed to the default (unnamed) slot of the child component by default
Scope slot
Slot-scope is the scope slot. Officially called it a scoped slot, in fact, compared to a named slot, we can call it a slot with data. The named slot is written in the template of the component, and the scope slot requires data to be bound to the slot.
for example
Parent component:
<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>Subassembly:
<template>
<div class="child">
<h3>这里是子组件</h3>
// 作用域插槽
<slot :data="data"></slot>
</div>
</template>
export default {
data: function(){
return {
data: ['zhangsan','lisi','wanwu','zhaoliu','tianqi','xiaoba']
}
}
}Three.v-slot
Starting from vue2.6, Vue has introduced a new syntax for named slots and scoped slots, the v-slot instruction. The purpose is to unify slot and scope-slot syntax, and make the code more standardized and clear. The specific usage is as follows: 1. The name of the slot is now used in the form of v-slot:slotName, as follows.
<template v-slot:header> </template>2. It should be noted here that v-slot can only be added to the template, which is different from the slot in Vue 2.5.
<template v-slot:slotName="data"> </template>3. Under normal circumstances, it is assumed that the Test component registration and component template are as follows,
//组件模板
<template id="test">
<div>
<h3>这里是test组件</h3>
<slot></slot>
</div>
</template>
//组件注册
Vue.component('Test', {
template: '#test',
data() {
return {
msg: 'Hello World!'
}
}
})When we need to get the Test component data in the p tag below, it may often be written as follows
<Test>
<template v-slot:default>
<p>{
{msg}}</p>
</template>
</Test>
但是，由于组件的数据只能限于当前组件模板才能使用，所以它访问不了Test组件中的数据，为了解决这个问题，需要给组件模板中的元素上动态绑定一个对象属性，绑定到 元素上的属性我们称之为 slot props。该对象属性的名字可以自定义，而属性值就是Test组件数据的名字，这样就可以获取到Test组件中的数据，如下 <slot ：msg="msg"></slot>At the same time, use v-slot to refactor the above code.
<Test>
<template v-slot:default="data">//此处的data就是在<slot>中绑定的属性slot props
<p>{
{data.msg}}</p>
</template>
</Test>