Vue 教程（14）—— 插槽
1 插槽内容
Vue 实现了一套内容分发的 API，这套 API 基于当前的 Web Components 规范草案，将
它允许你像这样合成组件：
<div id="app1">
<navigation-link url="/profile">
Your Profile
navigation-link>
div>然后你在
Vue.component('navigation-link', {
template: `
<a
v-bind:href="url"
class="nav-link"
>
<slot>slot>
a>
`
});当组件渲染的时候，这个
插槽内可以包含任何模板代码，包括 HTML：
<navigation-link url="/profile">
<span class="fa fa-user">span>
Your Profile
navigation-link>甚至其它的组件：
navigation-link url="/profile">
<font-awesome-icon name="user">font-awesome-icon>
Your Profile
navigation-link>如果
2 具名插槽
有些时候我们需要多个插槽。例如，一个假设的
<div class="container">
<header>
header>
<main>
main>
<footer>
footer>
div>对于这样的情况，name。这个特性可以用来定义额外的插槽：
<div class="container">
<header>
<slot name="header">slot>
header>
<main>
<slot>slot>
main>
<footer>
<slot name="footer">slot>
footer>
div>在向具名插槽提供内容的时候，我们可以在一个父组件的 元素上使用 slot 特性：
<base-layout>
<template slot="header">
<h1>Here might be a page titleh1>
template>
<p>A paragraph for the main content.p>
<p>And another one.p>
<template slot="footer">
<p>Here's some contact infop>
template>
base-layout>另一种 slot 特性的用法是直接用在一个普通的元素上：
<base-layout>
<h1 slot="header">Here might be a page titleh1>
<p>A paragraph for the main content.p>
<p>And another one.p>
<p slot="footer">Here's some contact infop>
base-layout>我们还是可以保留一个未命名插槽，这个插槽是默认插槽，也就是说它会作为所有未匹配到插槽的内容的统一出口。上述两个示例渲染出来的 HTML 都将会是：
<div class="container">
<header>
<h1>Here might be a page titleh1>
header>
<main>
<p>A paragraph for the main content.p>
<p>And another one.p>
main>
<footer>
<p>Here's some contact infop>
footer>
div>3 默认插槽的内容
有的时候为插槽提供默认的内容是很有用的。例如，一个
你可以在
<button type="submit">
<slot>Submitslot>
button>如果父组件为这个插槽提供了内容，则默认的内容会被替换掉。
4 编译作用域
当你想在插槽内使用数据时，例如：
<navigation-link url="/profile">
Logged in as {{ user.name }}
navigation-link>该插槽可以访问跟这个模板的其它地方相同的实例属性 (也就是说“作用域”是相同的)。但这个插槽不能访问 url 是不会工作的。牢记一条准则：
父组件模板的所有东西都会在父级作用域内编译；子组件模板的所有东西都会在子级作用域内编译。
5 作用域插槽
2.1.0+ 新增
有的时候你希望提供的组件带有一个可从子组件获取数据的可复用的插槽。例如一个简单的
Vue.component('todo-list',{
template:`
<ul>
<li
v-for="todo in todos"
v-bind:key="todo.id">
{{ todo.text }}
li>
ul>
`
});但是在我们应用的某些部分，我们希望每个独立的待办项渲染出和 todo.text 不太一样的东西。这也是作用域插槽的用武之地。
为了让这个特性成为可能，你需要做的全部事情就是将待办项内容包裹在一个
<ul>
<li
v-for="todo in todos"
v-bind:key="todo.id"
>
<slot v-bind:todo="todo">
{{ todo.text }}
slot>
li>
ul>现在当我们使用 作为替代方案，并且可以通过 slot-scope 特性从子组件获取数据：
<todo-list v-bind:todos="todos">
<template slot-scope="slotProps">
<span v-if="slotProps.todo.isComplete">✓span>
{{ slotProps.todo.text }}
template>
todo-list>在 2.5.0+，
slot-scope不再限制在元素上使用，而可以用在插槽内的任何元素或组件上。
解构 slot-scope
如果一个 JavaScript 表达式在一个函数定义的参数位置有效，那么这个表达式实际上就可以被 slot-scope 接受。也就是说你可以在支持的环境下 单文件组件或现代浏览器)，在这些表达式中使用 ES2015 解构语法。例如：
<todo-list v-bind:todos="todos">
<template slot-scope="{ todo }">
<span v-if="todo.isComplete">✓span>
{{ todo.text }}
template>
todo-list>这会使作用域插槽变得更干净一些。