Vue之Slot插槽

Vue组件化开发，除了单纯的引用一个组件外，还可以给组件定制化一些特有的东西。

组件负责完成基本功能，提供一些Slot插槽，供调用方完成一些特有的功能。

Slot

中文译为：插槽，可以理解为：插座，可以外接各种电器。

Cmp1.vue

<template>
  <div>
    cmp1
    <hr>
    <Cmp2>
      <p slot="s1">插槽接入1</p>
      <p slot="s2">插槽接入2</p>
    </Cmp2>
  </div>
</template>

<script>
  import Cmp2 from "./Cmp2";
  export default {
      name: "Cmp1",
      components:{
          Cmp2
      }
  };
</script>

Cmp2.vue

<template>
  <div>
    cmp2
    <slot name="s1">
      插槽1、引用组件插入后我将不会显示
    </slot>

    <slot name="s2">
      插槽2、引用组件插入后我将不会显示
    </slot>
  </div>
</template>

<script>
    export default {
        name: "Cmp2"
    }
</script>