當我們在父元件定義了一個數組,

  data() {
    return {
      name: ["lkx", "msx"]
    }
  }

想把它傳到子元件處理後

  props: {
    names: {
      type: Array,
      default: () => []
    }
  }

通過插槽的方式再傳送回父元件

 <template v-for="(item,index) in names" :key="item">
      <slot ></slot>
    </template>
 

在父元件對子元件中處理過的資料進行使用時,

比如說我們想要在父元件想使用子元件的item和index的內容將他渲染到html上,如果我們直接使用

 <div>
    <show-names :names="name">
        <button>{{item}}</button>
　　 </show-names>
 </div>

會出現這樣的結果

我們可以這樣做,通過作用域插槽的方式來解決

子元件中使用v-bind繫結item和index

 <template v-for="(item,index) in names"
 
 :key="item">
      <slot :item="item" :index="index"></slot>
  </template>

父元件中使用v-slot="slotProps"

這裡的v-slot="slotProps"是簡寫形式,因為我們在子元件的slot中沒有定義name屬性,所以這個slot會有一個預設的name為default,

比方說我們在子元件中定義一個name="lkx",那麼父元件中的寫法就變成v-slot:lkx="slotProps",又因為v-slot:的語法糖是#,所以父元件最終寫為#lkx="slotProps"

<template>
  <div>
    <show-names :names="name">
      <template v-slot="slotProps">
        <button>{{ slotProps.item }}</button>
      </template>
    </show-names>
  </div>
</template>

獨佔預設插槽

  <show-names :names="name" v-slot="lkx">

        <button>{{ lkx.item }}--{{lkx.index}}</button>

    </show-names>

嗯,我咋感覺和子傳父那麼像呢,明天動手試試