Vue插槽

插槽语法是Vue实现的内容分发API，用于复合组件开发，该技术在通用组件库开发用有大量应用

Vue 2.6.0 之后采用全选 v-slot 语法取代之前的 slot  slot-scope

1、匿名插槽

// parent
<HelloWorld>
    abcabcabcbabc
</HelloWorld>

// child
<slot></slot>

2、具名插槽：将内容分发到子组件指定的位置

// parent
<HelloWorld>
  <template v-slot:default>abcabcabcbabc</template>
  <template v-slot:content>具名插槽</template>
</HelloWorld>

// child
<slot></slot>
<slot name="content"></slot>

3、作用域插槽，子组件可以自行展示内容// parent

<HelloWorld>
      <template v-slot:content="slotProps">{{slotProps.dong}}</template>

</HelloWorld>

// child
<slot name="content" dong="dong~~~~~~"></slot>

可以进行对象的解构写法

　<HelloWorld>

      <template v-slot:content="{dong}">{{dong}}</template>
</HelloWorld>