Vue笔记（三）：Components—slot
Solt - 内容分发
父组件模板的内容在父组件作用域内编译，子组件模板的内容在子组件作用域内编译。
组件的作用域相互独立，子组件中定义的数据只能在子组件模板内使用，父组件也如此。如果子组件想要使用父组件的数据，需要子组件定义 props 属性来实现。
为了让组件可以组合，我们需要一种方式来混合父组件的内容与子组件自己的模板，这个过程被称为内容分发。Vue.js 使用 <slot> 元素作为内容插槽。
1. 单个插槽
<slot>标签中的内容为备用内容，仅在<my-component>标签内容为空时显示。<my-component>标签内如果有其他内容，则替换<slot>标签显示其内容。- 如果组件模板内无
<slot>插槽，那么<my-component>标签中内容将会被丢弃。
<!-- my-component组件模板 -->
<template>
<div>
<h3>component-1</h3>
<slot>
<p>备用内容</p>
</slot>
<h3>component-2</h3>
</div>
</template>
<!-- 父组件 -->
<my-component></my-component>
2. 具名插槽
- 用
name属性来配置如何分发内容，并匹配内容片段中有对应slot特性的元素。 - 匿名插槽作为找不到匹配的内容片段的备用插槽。
<template>
<div class="container">
<header>
<slot name="header"></slot>
</header>
<slot></slot>
<footer>
<slot name="footer"></slot>
</footer>
</div>
</template>
<my-layout>
<h1 slot="header">This is a header</h1>
<p>nameless</p>
<h1 slot="footer">This is a footer</h1>
</my-layout>
渲染结果：
<div class="container">
<header>
<h1 slot="header">This is a header</h1>
</header>
<p>nameless</p>
<footer>
<h1 slot="footer">This is a footer</h1>
</footer>
</div>
3. 作用域插槽
作用域插槽与 props 具有类似功能，可用于父子组件的数据传递。
在父级中，具有特殊特性 scope 的
<template>元素必须存在，表示它是作用域插槽的模板。scope 的值对应一个临时变量名，此变量接收从子组件中传递的 props 对象：
<!-- 子组件模板 -->
<div>
<slot txt="Hello World!" ></slot>
</div>
<my-component>
<template scope="prop">
<p>{{prop.txt}}</p>
</template>
</my-component>
渲染结果：
<div>
<p>Hello World!</p>
</div>
复用组件
在编写组件时，最好考虑好以后是否要进行复用。一次性组件间有紧密的耦合没关系，但是可复用组件应当定义一个清晰的公开接口，同时也不要对其使用的外层数据作出任何假设。
Vue 组件的 API 来自三部分——prop、事件和插槽：
- Prop 允许外部环境传递数据给组件；
- 事件允许从组件内触发外部环境的副作用；
- 插槽允许外部环境将额外的内容组合在组件中。
