vue slot 插槽 抽象理解

抽象理解

将 调用子组件的父组件 假设成一个凹陷的地面。
将 被调用的子组件 比喻成这个地面凹陷处的填充物，比如说水池。
这个水池可以被分成许多份，每一份小水池都由这个子组件来决定、命名。
被分成许多份的小水池，是否出现使用由调用这个子组件的父组件决定。

代码理解

默认代码

父组件

<template>
  <div>
    <h3>这里是父组件</h3>
    <child>
      <span>我是父组件定义的</span>
    </child>
  </div>
</template>

子组件

<template>
  <div>
    <h3>这里是子组件</h3>
    <h3>这里是slot标签上面</h3>
<!--    <slot></slot>-->
    <h3>这里是slot标签下面</h3>
  </div>
</template>

效果显示（ slot 被注释了，并没有效果哟 ）

注：一定一定要留意，父组件里面的 span 标签并没有显示效果

默认插槽、匿名插槽

保持父组件代码不变，更改子组件代码

<template>
  <div>
    <h3>这里是子组件</h3>
    <h3>这里是slot标签上面</h3>
    <slot></slot>
    <h3>这里是slot标签下面</h3>
  </div>
</template>

效果显示（子组件的 slot 的注释被取消了，数据显示）

使用总结：

1. 在父组件模板里，插入在子组件标签内的所有内容将替代子组件的标签及它的内容，比如：上述父组件中的 span 标签，显示在子组件里面，也就是 slot 所在的位置。
2. 父组件在子组件中定义的所有内容，默认都是被 slot 标签代替的。（匿名标签、默认标签）。

命名插槽、具名插槽

还记得开头的时候，那个水池可以被划分为多个水池吗？
我们可以在父组件中写多个 slot 标签，并通过命名的方式来指定区分使用它们。
新的父组件代码

<template>
  <div>
    <h3>这里是父组件</h3>
    <child>
      <span slot="default">我是父组件定义的</span>
      <span slot="one">我是父组件定义的one</span>
      <span>啊！我没有slot标签</span>
      <span slot="two">我是父组件定义的two</span>
      <span slot="four">我是父组件定义的four</span>
      <span slot="five">我是父组件定义的five</span>
      <span>啊！我也没有slot标签</span>
    </child>
  </div>
</template>

新的子组件代码

<template>
  <div>
    <h3>这里是子组件</h3>
    <h3>这里是slot标签上面</h3>
    <slot></slot><br/>
    <slot name="two"></slot><br/>
    <slot name="third"></slot><br/>
    <slot name="five"></slot><br/>
    <slot name="four"></slot><br/>
    <h3>这里是slot标签下面</h3>
  </div>
</template>

效果显示

使用总结：

1. 首先先看第一行，其实这一行是由父组件中具体化的两个span组成。当父组件中的 slot 命名为 default 时，或者只有 slot 标签时，再或者连 slot 标签都没有，都会被顺序加入到 slot 命名为 default 的标签中。效果等同于匿名插槽（默认插槽）了。总的来说，如下，在子组件中定义的代码效果相同，都会被默认为 default。
   
2. 此次，看这些 span 出现的顺序，是在子组件中定义好的。
3. 再看，我们可以发现效果显示中有一个空行，那是因为有个 span 标签没有被父组件使用。也就是说，子组件中 的 slot 插槽是否使用由父组件控制。
4. 再再看，在父组件中，使用了一个名字（one）在子组件没有定义的插槽，这自然是不会出现的。

作用域插槽

新的父组件代码：

<template>
  <div>
    <h3>这里是父组件</h3>
    <child>
      <span slot="default">我是父组件定义的</span>
      <span slot="one">我是父组件定义的one</span>
      <span slot="two">我是父组件定义的two</span>
      <span slot="four">我是父组件定义的four</span>
      <span slot="five">我是父组件定义的five</span>
      <span>啊！我没有被slot标签</span>
      <div slot="six" slot-scope="get">
        乖兔儿父组件接收了子组件的数据：{{get.scope1}}
        <br/>
        乖兔儿收到了来自组件的惊喜：{{get.scope2}}
      </div>
    </child>
  </div>
</template>

新的子组件代码：

<template>
  <div>
    <h3>这里是子组件</h3>
    <h3>这里是slot标签上面</h3>
    <slot name="default"></slot><br/>
    <slot name="two"></slot><br/>
    <slot name="third"></slot><br/>
    <slot name="five"></slot><br/>
    <slot name="four"></slot><br/>
    <slot name="six" :scope1="data" :scope2="data2"></slot>
    <h3>这里是slot标签下面</h3>
  </div>
</template>

<script>
  export default {
    name: "Child",
    data () {
      return {
        data: '子组件表达了自己亿点点心意。',
        data2: '子组件出其不意又表达了自己亿点点心意。'
      }
    }
  }
</script>

效果显示：

使用总结：

1. 数据传递就像普通使用的参数传递方式，不同的是，子组件传递数据给父组件。
2. 在父组件中定义好接受的域名名字，然后在子组件中定义好要发送的数据。
3. 继上第二点，父组件中定义域名名字使用 slot-scope。通过这个域名，可以访问插槽传递过来的不同数据。具体使用查看上面的代码。