Vue 匿名、具名和作用域插槽的使用

JS菌發表於2019-04-19
Vue

20190417175402.png

Vue 匿名、具名和作用域插槽的使用

⭐️ 更多前端技術和知識點，搜尋訂閱號 JS 菌 訂閱

Vue 中的插槽在開發元件的過程中其實是非常重要並且好用的。Vue 的插槽也沒有說很難使用，這篇文章簡明扼要的介紹了三種插槽的用法。 ?

匿名插槽

子元件定義 slot 插槽，但並未具名，因此也可以說是預設插槽。只要在父元素中插入的內容，預設加入到這個插槽中去。 ?

<template>
  <div>
    hello <slot>陌生人</slot>
  </div>
</template>
複製程式碼

這裡定義了一個預設插槽，只要往裡頭丟東西，就會被加入到這個插槽裡面

⚠️ slot 元素裡面可以加入一系列後備內容，一旦父元素沒有插入任何資訊，那麼就會渲染後備內容。

<my-comp>
    oli
</my-comp>
複製程式碼

如在父元件中使用這個子元件，並插入 oli 字串，效果如下：

20190417173349.png

具名插槽

具名插槽可以出現在不同的地方，不限制出現的次數。只要匹配了 name 那麼這些內容就會被插入到這個 name 的插槽中去。 ?

<template>
  <div>
    <slot name="nav"></slot>
    <br/>
    <slot name="content"></slot>
    <br/>
    <slot name="footer"></slot>
  </div>
</template>
複製程式碼

比如上述程式碼定義了三個具名插槽。在父元件中即可使用 slot 屬性插入到對應的插槽中：

<template>
  <div>
    <my-comp>
      <template slot="nav">navigator</template>
      <template slot="footer">footer</template>
      <template slot="content">content</template>
    </my-comp>
  </div>
</template>
複製程式碼

另外，順序並不重要，content 在 footer 下方但依然能夠按照 slot 定義的順序渲染：

20190417174221.png

作用域插槽

通常情況下普通的插槽是父元件使用插槽過程中傳入東西決定了插槽的內容。但有時我們需要獲取到子元件提供的一些資料，那麼作用域插槽就排上用場了。 ?

在子元件中建立 slot 並通過 v-bind 繫結資料 prop 的形式傳入資料：

<slot :data="data"></slot>
複製程式碼

在元件 data 中建立資料：

export default {
  name: 'MyComp',
  data () {
    return {
      data: { // 內部狀態
        username: 'oli'
      }
    }
  }
}
複製程式碼

這樣就可以在插槽中訪問到子元素的資料了：

<template v-slot:default="user">{{user.data.username}}</template>
複製程式碼

也可以不書寫 default 關鍵字，預設就是假定對應預設插槽

<template v-slot="user">{{user.data.username}}</template>
複製程式碼

使用 v-slot 繫結一個名稱空間 user，這樣就可以通過 user 物件引用到子元件中傳入的資料了

⚠️ 與具名插槽配合時，需要明確書寫對應的名稱空間：

<template #:one="user">{{user.data.username}}</template>
<template #:another="user">{{user.data.username}}</template>
複製程式碼

# 代表 v-slot 的縮寫，縮寫在有引數的情況下才會生效

動態插槽名

另外，2.6 版本的 vue 還加入了動態插槽名的功能，用來動態的定義插槽名稱：

<template #:[dynamicSlotName]></template>
複製程式碼

cn.vuejs.org/v2/guide/co…

JS 菌公眾賬號

請關注我的訂閱號，不定期推送有關 JS 的技術文章，只談技術不談八卦 ?

相關文章