溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家分享的是有關Vue中匿名、具名和作用域插槽有什么用的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。
Vue 中的插槽在開發組件的過程中其實是非常重要并且好用的。Vue 的插槽也沒有說很難使用，這篇文章簡明扼要的介紹了三種插槽的用法。
匿名插槽
子組件定義 slot 插槽，但并未具名，因此也可以說是默認插槽。只要在父元素中插入的內容，默認加入到這個插槽中去。
<template> <div> hello <slot>陌生人</slot> </div> </template>
這里定義了一個默認插槽，只要往里頭丟東西，就會被加入到這個插槽里面
slot 元素里面可以加入一系列后備內容，一旦父元素沒有插入任何信息，那么就會渲染后備內容。
<my-comp> oli </my-comp>
如在父組件中使用這個子組件，并插入 oli 字符串，效果如下：
具名插槽
具名插槽可以出現在不同的地方，不限制出現的次數。只要匹配了 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 定義的順序渲染：
作用域插槽
通常情況下普通的插槽是父組件使用插槽過程中傳入東西決定了插槽的內容。但有時我們需要獲取到子組件提供的一些數據，那么作用域插槽就排上用場了。 ?
在子組件中創建 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>
https://cn.vuejs.org/v2/guide...
PS:Vue作用域插槽使用實例詳解
這次給大家帶來Vue作用域插槽使用詳解，Vue作用域插槽使用的注意事項有哪些，下面就是實戰案例，一起來看一下。
舉個例子，比如我寫了一個可以實現條紋相間的列表組件，發布后，使用者可以自定義每一行的內容或樣式（普通的slot就可以完成這個工作）。而作用域插槽的關鍵之處就在于，父組件能接收來自子組件的slot傳遞過來的參數，具體看案例和注釋。
<!DOCTYPE html> <htmllang="en"> <head> <metacharset="UTF-8"> <title>Vue作用域插槽</title> <scriptsrc="https://cdn.bootcss.com/vue/2.3.4/vue.js"></script> </head> <body> <pid="app2"> <my-stripe-list:items="users"odd-bgcolor="#D3DCE6"even-bgcolor="#E5E9F2"> <!-- props對象接收來自子組件slot的$index參數 --> <templateslot="cont"scope="props"> <span>{{users[props.$index].id}}</span> <span>{{users[props.$index].name}}</span> <span>{{users[props.$index].age}}</span> <!-- 這里可以自定[編輯][刪除]按鈕的鏈接和樣式 --> <a:href="'#edit/id/'+users[props.$index].id"rel="external nofollow">編輯</a> <a:href="'#del/id/'+users[props.$index].id"rel="external nofollow">刪除</a> </template> </my-stripe-list> </p> <script> Vue.component('my-stripe-list', { /*slot的$index可以傳遞到父組件中*/ template: ` <p> <pv-for="(item, index) in items":> <slotname="cont":$index="index"></slot> </p> </p> `, props: { items: Array, oddBgcolor: String, evenBgcolor: String } }); new Vue({ el: '#app2', data: { users: [ {id: 1, name: '張三', age: 20}, {id: 2, name: '李四', age: 22}, {id: 3, name: '王五', age: 27}, {id: 4, name: '張龍', age: 27}, {id: 5, name: '趙虎', age: 27} ] } }); </script> </body> </html>
感謝各位的閱讀！關于“Vue中匿名、具名和作用域插槽有什么用”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
