重慶分公司
重慶分公司
Vue.js中的作用域插槽是什么-創(chuàng)新互聯(lián)
小編給大家分享一下Vue.js中的作用域插槽是什么，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！
成都創(chuàng)新互聯(lián)專注于東風(fēng)企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站建設(shè),
電子商務(wù)商城網(wǎng)站建設(shè)。東風(fēng)網(wǎng)站建設(shè)公司,為東風(fēng)等地區(qū)提供建站服務(wù)。全流程
定制網(wǎng)站制作，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，
成都創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)
作用域槽是Vue.js的一個(gè)有用特性，它可以使組件更加通用和可重用。的問題是它們很難理解!試著讓你的頭在父母和孩子的范圍內(nèi)交織，就像解決一個(gè)棘手的數(shù)學(xué)方程。
當(dāng)你不能很容易地理解某件事時(shí)，一個(gè)好的方法是試著用它來解決問題。在本文中，我將演示如何使用作用域槽來構(gòu)建可重用列表組件。
基本組成部分
我們要構(gòu)建的組件叫做my-list，它顯示了很多東西。該特性的特殊之處在于，您可以自定義列表項(xiàng)在每次使用組件時(shí)的呈現(xiàn)方式。
讓我們首先處理最簡(jiǎn)單的用例，并獲取my-list來呈現(xiàn)一個(gè)列表:一個(gè)幾何形狀名稱數(shù)組和它們的邊數(shù)。
app.js
Vue.component('my-list', {
template: '#my-list',
data() {
return {
title: 'Shapes',
shapes: [
{ name: 'Square', sides: 4 },
{ name: 'Hexagon', sides: 6 },
{ name: 'Triangle', sides: 3 }
]
};
}
});
new Vue({
el: '#app'
});index.html
{{ title }}
{{ shape.name }} ({{ shape.sides }} sides)
添加了一點(diǎn)CSS后，將會(huì)如下圖所示:
泛化my-list
現(xiàn)在，我們想要使my-list功能足夠多，以呈現(xiàn)任何類型的列表。第二個(gè)測(cè)試用例將是一個(gè)顏色列表，包括一個(gè)小樣本來顯示顏色。
為此，我們必須抽象特定于形狀列表的任何數(shù)據(jù)。由于列表中的項(xiàng)的結(jié)構(gòu)可能不同，我們將為my-list提供一個(gè)插槽，以便父列表可以定義任何特定列表的顯示方式。
app.js
Vue.component('my-list', {
template: '#my-list',
props: [ 'title' ]
});index.html
{{ title }}
現(xiàn)在讓我們?cè)诟鶎?shí)例中創(chuàng)建my-list組件的兩個(gè)實(shí)例來顯示我們的兩個(gè)測(cè)試用例列表:
app.js
new Vue({
el: '#app',
data: {
shapes: [
{ name: 'Square', sides: 4 },
{ name: 'Hexagon', sides: 6 },
{ name: 'Triangle', sides: 3 }
],
colors: [
{ name: 'Yellow', hex: '#F4D03F', },
{ name: 'Green', hex: '#229954' },
{ name: 'Purple', hex: '#9B59B6' }
]
}
});
{{ shape.name }} ({{ shape.sides }} sides)
{{ color.name }}
就像這樣:
表面成分
我們剛剛創(chuàng)建的代碼工作得很好，但是代碼并不好。my-list是按名稱顯示列表的組件。但是我們已經(jīng)抽象了所有將列表呈現(xiàn)到父列表中的邏輯。組件只是用一些表示標(biāo)記將列表包裝起來。
考慮到組件的兩個(gè)聲明中仍然有重復(fù)的代碼(例如
作用域的插槽
為了實(shí)現(xiàn)這一點(diǎn)，我們將使用作用域槽而不是常規(guī)槽。作用域插槽允許您將模板傳遞給插槽，而不是傳遞呈現(xiàn)的元素。它被稱為“作用域”槽，因?yàn)楸M管模板是在父作用域中呈現(xiàn)的，但它可以訪問特定的子數(shù)據(jù)。
例如，具有作用域插槽的組件子組件可能如下所示。
使用此組件的父組件將在槽中聲明模板元素。此模板元素將具有一個(gè)屬性范圍，該范圍指定別名對(duì)象。添加到slot(在子模板中)的任何道具都可以作為別名對(duì)象的屬性使用。
Hello from parent
{{ props.my-prop }}
顯示為:
Hello from parent
Hello from child
在my-list中使用作用域插槽
讓我們將列表數(shù)組作為道具傳遞給my-list。然后我們可以用作用域插槽替換插槽。這樣my-list就可以負(fù)責(zé)迭代列表項(xiàng)，但是父級(jí)仍然可以定義每個(gè)列表項(xiàng)應(yīng)該如何顯示。
index.html
現(xiàn)在我們得到my-list來迭代這些項(xiàng)。在v-for循環(huán)中，item是當(dāng)前列表項(xiàng)的別名。我們可以創(chuàng)建一個(gè)槽，并使用v-bind="item"將該列表項(xiàng)綁定到槽。
app.js
Vue.component('my-list', {
template: '#my-list',
props: [ 'title', 'items' ]
});index.html
{{ title }}
注意:如果您以前沒有見過v-bind在沒有參數(shù)的情況下使用，這將把整個(gè)對(duì)象的屬性綁定到元素。這對(duì)于作用域插槽非常有用，因?yàn)槟壎ǖ膶?duì)象通常具有任意屬性，現(xiàn)在不需要通過名稱指定這些屬性。
現(xiàn)在我們將返回到根實(shí)例，并在my-list的slot中聲明一個(gè)模板。首先查看形狀列表，模板必須包含我們?yōu)槠浞峙鋭e名形狀的scope屬性。這個(gè)別名允許我們?cè)L問限定范圍的道具。在模板內(nèi)部，我們可以使用與以前完全相同的標(biāo)記來顯示形狀列表項(xiàng)。
{{ shape.name }} ({{ shape.sides }} sides)
下面是完整的模板:
{{ shape.name }} ({{ shape.sides }} sides)
{{ color.name }}
看完了這篇文章，相信你對(duì)“Vue.js中的作用域插槽是什么”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！
網(wǎng)站標(biāo)題：Vue.js中的作用域插槽是什么-創(chuàng)新互聯(lián)
網(wǎng)站URL：http://weahome.cn/article/jehgi.html
-
在線咨詢
微信咨詢
電話咨詢
-
028-86922220（工作日）
18980820575（7×24）
-
提交需求
-
返回頂部
