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

vue

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

發(fā)布時間：2025/3/21 vue 51 豆豆

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

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

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

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

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

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

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

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

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

*根實例代碼，主要包括測試數(shù)據(jù)：

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

*最重要的組件調(diào)用

<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">我是學(xué)生</span><span v-if="!a.item.single">我不是單身</span><span v-if="!a.item.stu">我不是學(xué)生</span></template></list-tpl>

綜上：作用于插槽主要應(yīng)用在：需要在實際調(diào)用組件時選擇性渲染插槽內(nèi)容，而不是在定義時用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">我是學(xué)生</span><span v-if="!a.item.single">我不是單身</span><span v-if="!a.item.stu">我不是學(xué)生</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為向上層傳遞的數(shù)據(jù)，單個slot在調(diào)用時轉(zhuǎn)化為作用域內(nèi)的多個標簽</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>

轉(zhuǎn)載于:https://www.cnblogs.com/pomelott/p/9537147.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。