vue3 定义插槽组件

vue3 自定义插槽

A B 两个组件 其中 B组件为A的子组件
在A组件中引入B组件

// 当前为A页面 
import ThrTest from '../components/ThrTest.vue'
// ThrTest 为B组件 并且在B组件中定义 插槽 供全局在指定地方使用
   <FistSlot>
      father data
      <template #icon>
      // icon 对应B页面中的 slot name == icon 的插槽 
      //div是父组件的  B页面的插槽只是为A中数据预留了一个位置 公共样式居多的情况下 可在B页面进行
      //写，通常用于 相同类型的布局
            <div style="color: white;">father data1</div>
      </template>
   </FistSlot>

// B页面
    <div class="item">
         slot data
        <slot name="icon">
            
        </slot>

      <div class="details">
        <h3>
          <slot name="heading"></slot>
        </h3>
        <slot></slot>
      </div>
    </div>