一、vue插槽有什么用

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

二、匿名插槽

// 子组件
<template>
  <div>
    <slot></slot>
  </div>
</template>

// 父组件
<hello-world>
    <p>hello world</p>
</hello-world>

三、具名插槽

// 子组件 一个不带 name 的 slot 出口会带有隐含的名字default。
<template>
  <div>
    <slot name="header"></slot>
    <slot></slot>
    <slot name="footer"></slot>
  </div>
</template>

// 父组件
<template>
   <div>
      <hello-world>
        <template v-slot:header>
          我是header
        </template>
        <template>
          我是default
        </template>
        <template v-slot:footer>
          我是footer
        </template>
      </hello-world>
   </div>
</template>

四、作用域插槽

有时让插槽内容能够访问子组件中才有的数据是很有用的

// 子组件
<template>
  <div>
    <slot name="header" :msg="msg" :val="val"></slot>
    <slot></slot>
    <slot name="footer"></slot>
  </div>
</template>

// 父组件 slotProps可以替换
<template>
   <div>
      <hello-world>
        <template v-slot:header="slotProps">
          {{slotProps.msg}}{{slotProps.val}}
        </template>
        <template>
          我是default
        </template>
        <template v-slot:footer>
          我是footer
        </template>
      </hello-world>
   </div>
</template>