一、vue插槽有什么用

插槽語(yǔ)法是vue中實(shí)現(xiàn)內(nèi)容分發(fā)的api，用于復(fù)合組件開發(fā)。該技術(shù)在通用組件庫(kù)開發(fā)中有大量應(yīng)用

二、匿名插槽

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

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

三、具名插槽

// 子組件 一個(gè)不帶 name 的 slot 出口會(huì)帶有隱含的名字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>

四、作用域插槽

有時(shí)讓插槽內(nèi)容能夠訪問子組件中才有的數(shù)據(jù)是很有用的

// 子組件
<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>