vue作用域插槽詳解、slot、v-slot、slot-scope

更新時(shí)間：2022年03月30日 10:16:20 作者：秋刀魚(yú)笛滋味

這篇文章主要介紹了vue作用域插槽詳解、slot、v-slot、slot-scope，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue 插槽slot和具名插槽

作用都是在調(diào)用組件的時(shí)候傳遞一些DOM結(jié)構(gòu)進(jìn)去，

不同點(diǎn)是：具名插槽在傳遞DOM時(shí)需要聲明，傳遞給哪個(gè)slot的名字 name

他們用法簡(jiǎn)單不在贅述。

重點(diǎn)說(shuō)一下作用域插槽 slot-scope 的使用，以及vue2.6.X開(kāi)始的新語(yǔ)法v-slot

作用域插槽的核心作用是

子組件給父組件傳遞數(shù)據(jù),當(dāng)然也包含上述插槽的能力

老版作用域插槽，

slot="test"：指定插槽的名字用
prop：可以隨便定義，表示子組件傳遞過(guò)來(lái)的值得對(duì)象，可以用解構(gòu)復(fù)制 { row, index }接受

<template slot="test" slot-scope="prop">
   {{ prop.wife.a }}
 </template>

新版是這樣的，可以說(shuō)語(yǔ)法更加清晰

v-slot指令直接跟上插槽名稱(chēng)，prop同上

 <template v-slot:test="prop">
          {{ prop.wife.b }}
        </template>

實(shí)例說(shuō)明

子組件

這里我定義了多個(gè)具名插槽，并且用父組件傳過(guò)來(lái)的數(shù)據(jù)嘗試傳遞回去

<template>
  <div>
    <slot :user="user">
      <!-- 默認(rèn)顯示的值，當(dāng)父組件使用次作用域插槽時(shí)，會(huì)被覆蓋 -->
      {{ user.age }} 
    </slot>
    <slot name="test" :wife='wife'>
      {{wife.a}}
    </slot>
    <slot name="hasProps" :baseData='baseData'>
      {{baseData.a_count}}
    </slot>
  </div>
</template>

<script>
export default {
  props: {
    baseData: {
      type: Object,
      default: () => {
        return {
          a_count: 0,
          b_count: 0,
          c_count: 0,
          d_count: 0,
          e_count: 0,
          order_amount: 0,
          order_num: 0,
          resource_num: 0
        }
      }
    }
  },
  data () {
    return {
      user: {
        name: '張三',
        age: 20
      },
      wife: {
        a: '小李',
        b: '小韓'
      }
    }
  }
}
</script>

父組件

部分代碼：

其中的baseData，為服務(wù)端異步返回?cái)?shù)據(jù)

  <div>
      <child>
        <template v-slot:default="prop">
          {{ prop.user.age }}
        </template>
        <template v-slot:test="prop">
          {{ prop.wife.b }}
        </template>
      </child>
      
      <child>
        <template slot-scope="prop">
          {{ prop.user.name }}
        </template>
        <template slot="test" slot-scope="prop">
          {{ prop.wife.a }}
        </template>
      </child>
      <!-- 嘗試解構(gòu)賦值 -->
      <child :baseData='baseData'>
        <template v-slot:hasProps="{baseData}">
          {{ baseData.a_count }}
        </template>
      </child>
    </div>