【无标题】

vue 插槽

// 用法案例
//父组件
<template>
  <div class="box">
    <Son>
      <p>default slot</p>
      <template v-slot:slot1>
        <p>slot1</p>
      </template>
      <template #slot2="{ msg }">
        <p>slot2:{{ msg }}</p>
      </template>
    </Son>
  </div>
</template>

//子组件
  <div class="box">
    <!-- 默认插槽 -->
    <slot></slot>
    <!-- 具名插槽 -->
    <slot name="slot1"></slot>
    <!-- 作用域插槽 -->
    <slot name="slot2" msg="hello world"></slot>
  </div>
</template>