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

vue 插槽slot 和 具名插槽

作用都是在調用元件的時候傳遞一些DOM結構進去，

不同點是：具名插槽在傳遞DOM時需要聲明，傳遞給哪個slot的名字 name

他們用法簡單不在贅述。

重點說一下作用域插槽 slot-scope 的使用，以及vue2.6.X開始的新文法v-slot

作用域插槽的核心作用是：

子元件給父元件傳遞資料,當然也包含上述插槽的能力

老版作用域插槽，

slot="test“： 指定插槽的名字用

prop：可以随便定義，表示子元件傳遞過來的值得對象，可以用解構複制 { row, index }接受

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

新版是這樣的，可以說文法更加清晰

v-slot指令直接跟上插槽名稱，prop同上

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

執行個體說明

子元件

這裡我定義了多個具名插槽，并且用父元件傳過來的資料嘗試傳遞回去

<template>
  <div>
    <slot :user="user">
      <!-- 預設顯示的值，當父元件使用次作用域插槽時，會被覆寫 -->
      {{ 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，為服務端異步傳回資料

<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>
      <!-- 嘗試解構指派 -->
      <child :baseData='baseData'>
        <template v-slot:hasProps="{baseData}">
          {{ baseData.a_count }}
        </template>
      </child>
    </div>
           

效果圖：

這兩種是先注釋掉所有child裡面，所有代碼的效果，前為接口傳回前

這兩張是不注釋，前後圖

可以看出，

在vue2.6以上兩種模式都支援，不過官方說3.0就隻支援v-slot指令了，

不使用作用域插槽就會顯示預設的值，使用之後就按父元件的來

可以先動态更新資料。

使用過element-ui的同學，隻要用過表格，我想現在應該明白作用域插槽有多大的用處了吧