vue笔记1：插槽

一、理解插槽

官方解释：承载分发内容的出口。

自己理解：

组件A: 使用者（套模板的人小A）。
组件B: 使用者。（套模板的人小B）
组件C: 被使用者（写原创模板的人小C）。

过程：写原创模板的人，为了他的模板更多人能使用，就把一些地方留白，以便套模板的人可以按照自己的需求灵活填上内容。留白的地方就是插槽。

通俗说明：有插槽的组件就像作文套用模板。
例如：
组件C写句子模板：兴高采烈的（XXX）；
说明：（XXX）留白, 就对应插槽的地方。

使用场景1：
组件A用组件C（小A使用小C写的模板）：今天放假，大家兴高采烈的（去游乐园）;
使用场景2：
组件B使用组件C（小B使用小C写的模板）: 新手机发布，电子产品爱好者兴高采烈的（等着抢购）

二、插槽详解

1. 后备内容
模板的插槽里有默认值。
如果父组件有传入的插槽内容，使用传入的，如果没有传入，使用默认的值。

2、具名插槽
插槽标识，特定的插槽放特定的位置。
使用：
（1）子组件中组要写有名字(name=)的插槽的 ：
<slot name="header"></slot>
（2）父组件的插入的内容 ①template ②v-slot:

<template v-slot:header>xxxxx</template>

例如：

    <!-- base-layout子组件 -->
    <div>
        <header>
            <slot name="header"></slot>
        </header>
    </div>
<!-- 父组件 -->
<base-layout>
    <template v-slot:header>
        <h1>Here might be a page title</h1>
    </template>
</base-layout>

3、作用域插槽
父组件插槽使用子组件里的数据。
使用：
1、子组件把值绑定出去 ：v-bind:user=“user”

 <slot v-bind:user="user">
    {{ user.lastName }}
  </slot>

2、父组件插槽拿到值。

 <template v-slot:default="slotProps">
    {{ slotProps.user.firstName }}
  </template>
  // 注意只有一个默认插槽，可简写规则 ：1、直接写到子组件名后，2、v-slot：default简写为"#default="
   <todo-item #default="slotProps">
    {{ slotProps.user.firstName }}
  </todo-item>

注意点：
1、如果有多个子组件插槽，需要每个都用template包裹。
2、slotProps相当于子组件的绑定出去所用值的对象。所以可以用解构。
类似于：

// 绑定组成的新数组。
const slotProps = { user };
// 重新解构开使用。
const { user } = slotProps;
<todo-item v-slot="{ user }">
  {{ user.firstName }}
</todo-item>

**3、缩写 **
v-slot: header 可以被重写为 # header

4、动态插槽

v-slot:[dynamicSlotName]
例如：
父组件相关：

  <div id="app">
            <todo-item>
            // 等同于 v-slot: [name]
                <template #[name]>
                    1111111111
                </template>
            </todo-item>
    </div>
    _________________________________________________________________________
      new Vue({
        el:"#app",
        data: {
        // 动态名字
            name: 'title',
        }
    });

子组件相关:

Vue.component('todo-item', {
    data() {
        return {};
    },
    template: `<div><slot name='title'></slot></div>`
})