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>

JS Bin - slot Dialog

复用组件

在编写组件时，最好考虑好以后是否要进行复用。一次性组件间有紧密的耦合没关系，但是可复用组件应当定义一个清晰的公开接口，同时也不要对其使用的外层数据作出任何假设。
Vue 组件的 API 来自三部分——prop、事件和插槽：

• Prop 允许外部环境传递数据给组件；
• 事件允许从组件内触发外部环境的副作用；
• 插槽允许外部环境将额外的内容组合在组件中。

JS Bin - table - app - 简单表格数据的添加、删除、查询