當前位置：首頁 > 前端技术 > vue >内容正文

vue

细说Vue作用域插槽，匹配应用场景。

發布時間：2025/3/21 vue 49 豆豆

生活随笔收集整理的這篇文章主要介紹了细说Vue作用域插槽，匹配应用场景。小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

最近在官方文檔中看到，vue新增了一種插槽機制，叫做作用域插槽。要求的版本是2.1.0+。

首先來說一下：顧名思義，所謂作用域插槽，主要就在作用域，需要注意的是（以下幾點看不懂不要緊，配合下面的例子，你會一看就懂）：

1. 組件中的slot標簽只能有有一個，而這一個slot用于替代組件調用時的多個標簽。即一個slot代替一組范圍的標簽，即為作用域。

2. 作用域插槽的特殊在于：可在上層作用域中通過臨時變量拿到組件定義時通過作用域插槽傳遞的數據。

3. 作用域插槽的技巧在于：可在上層作用域中通過拿到的數據選擇性地渲染標簽（即修改slot對應的標簽范圍）。

下面通過實際例子來一步一步地細說：

**擁有作用域插槽的組件定義（實際代碼中組件要在根實例創建之前定義）：

Vue.component("list-tpl", {props: ["list"],template: `<ul><li style="display:block;" v-for="(item, index) in list"><slot :item="item"></slot> // item為向上層傳遞的數據，單個slot在調用時轉化為作用域內的多個標簽</li></ul> `})

*根實例代碼，主要包括測試數據：

var app = new Vue({el: "#app",data: {list: [{name: "tate",age: 26,single: true, // 是否單身stu: false // 是否是學生},{name: "kevin",age: 23,single: true,stu: true},{name: "harden",age: 28,single: false,stu: false},{name: "Jimmy",age: 29,single: false,stu: true}]}})

*最重要的組件調用

<list-tpl :list="list"><template slot-scope="a"><h4>{{a.item.name}}</h4><h5>{{a.item.age}}</h5><span v-if="a.item.single">我是單身</span><span v-if="a.item.stu">我是學生</span><span v-if="!a.item.single">我不是單身</span><span v-if="!a.item.stu">我不是學生</span></template></list-tpl>

綜上：作用于插槽主要應用在：需要在實際調用組件時選擇性渲染插槽內容，而不是在定義時用js寫。

*下面看一下本例子的實際效果：

*本例的全部代碼如下，可自行運行查看效果：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title> </head> <body><div id="app"><slot-test><template slot="top">定制top</template></slot-test><list-tpl :list="list"><template slot-scope="a"><h4>{{a.item.name}}</h4><h5>{{a.item.age}}</h5><span v-if="a.item.single">我是單身</span><span v-if="a.item.stu">我是學生</span><span v-if="!a.item.single">我不是單身</span><span v-if="!a.item.stu">我不是學生</span></template></list-tpl></div><script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script><script>Vue.component("slot-test", {template: "<div>\<slot name='top'>\<p>默認top</p>\</slot>\<slot name='mid'>\<p>默認mid</p>\</slot>\<slot name='bottom'>\<p>默認bototm</p>\</slot>\</div>"})Vue.component("list-tpl", {props: ["list"],template: `<ul><li style="display:block;" v-for="(item, index) in list"><slot :item="item"></slot> // item為向上層傳遞的數據，單個slot在調用時轉化為作用域內的多個標簽</li></ul> `})var app = new Vue({el: "#app",data: {list: [{name: "tate",age: 26,single: true,stu: false},{name: "kevin",age: 23,single: true,stu: true},{name: "harden",age: 28,single: false,stu: false},{name: "Jimmy",age: 29,single: false,stu: true}]}})</script> </body> </html>

轉載于:https://www.cnblogs.com/pomelott/p/9537147.html

總結

以上是生活随笔為你收集整理的细说Vue作用域插槽，匹配应用场景。的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。