插槽内容: 将 <slot’> 元素作为承载分发内容的出口,可以合成组件
/* <slot> 元素将会被替换为 "Your Profile" */
<navigation-link url="/profile"> Your Profile</navigation-link>
Vue.component('navigation-link',{
template: `<a><slot></slot></a>`
})
插槽内可以包含任何模板代码,包括 HTML
<navigation-link url="/profile">
<!-- 添加一个 Font Awesome 图标 -->
<span class="fa fa-user"></span>
</navigation-link>
Vue.component('navigation-link',{
template: `<a><slot></slot></a>`
})
如果组件没有包含一个 <slot’> 元素,则任何传入它的内容都不会被替换并渲染
具名插槽:
利用 name 特性可以在组件内放置多个插槽
<div class="container">
<header><slot name="header"></slot></header>
<main><slot></slot></main>
<footer><slot name="footer"></slot></footer>
</div>
向具名插槽提供内容时,可以在父组件的 <template’> 上使用 slot 特性
<base-layout>
<template slot="header"><h1> title</h1></template>
<template slot="footer"><p>info</p></template>
</base-layout>
slot 特性也可以用在普通元素上
<base-layout>
<h1 slot="header">Here might be a page title</h1>
<p slot="footer">Here's some contact info</p>
</base-layout>
插槽的默认内容:
在 <slot’>标签内部指定默认内容,父组件在插槽中提供内容,默认的内容会被替换掉
<button type="submit"><slot>Submit</slot></button>
编译作用域:
在插槽内使用数据时,父组件模板的所有东西都会在父级作用域内编译;
子组件模板的所有东西都会在子级作用域内编译
<navigation-link url="/profile">{{ user.name }}</navigation-link>
作用域插槽:
将待办项内容包裹在一个 <template’> 元素上,通过 slot-scope=“Props” 可从子组件获取数据
例1
<!--父组件-->
<div id="root">
<child>
<template slot-scope="props"> /* props 是一个对象 */
<li>{{ props.item }}</li>
</template>
</child>
</div>
/* 子组件 */
Vue.component('child',{
data(){
return {
list: [ 1, 2, 3, 4, 5]
}
},
template: `<ul><slot v-for="( item, index ) of list"></slot></ul>`
});
var vm = new Vue({
el: '#root'
});
例2
/* 子组件 */
`<ul>
<li v-for="item in obj" :key="item.id">
<!-- 为每个 todo 准备了一个插槽,-->
<!-- 将 `todo` 对象作为一个插槽的 prop 传入 -->
<slot :todo="item">{{ todo.text }}</slot>
</li>
</ul>`
/* 父组件 */
<todo-list :todos="todos">
<template slot-scope="slotProps"> /* 将 `slotProps` 定义为插槽作用域的名字 */
{{ slotProps.todo.text }}
</template>
</todo-list>
解构 slot-scope
<todo-list v-bind:todos="todos">
<template slot-scope="{ todo }">
<span v-if="todo.isComplete">✓</span>
{{ todo.text }}
</template>
</todo-list>