插槽

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

匿名插槽

子组件HelloWorld

  <div class="hello">
    <slot></slot>
  </div>

父组件

<HelloWorld>helloworld</HelloWorld>

具名插槽

将内容分发到子组件指定位置

子组件HelloWorld

  <div class="hello">
    <slot></slot>
    <slot name="content"></slot>
  </div>

父组件

<HelloWorld>
          <template v-slot:default>匿名插槽的默认值v-slot:default</template>
          <template v-slot:content>具名插槽</template>
      </HelloWorld>

作用域插槽 父组件拿子组件的值来显示

子组件HelloWorld

//data里定义变量add 然后v-bind
<slot name="content" :add="add"></slot>

父组件

//slotProps是个对象
<template v-slot:content="slotProps">{{slotProps.add}}</template>