站長資訊網(wǎng)
        最全最豐富的資訊網(wǎng)站

        詳解Vue.js中的作用域插槽

        詳解Vue.js中的作用域插槽

        作用域槽是Vue.js的一個有用特性,它可以使組件更加通用和可重用。唯一的問題是它們很難理解!試著讓你的頭在父母和孩子的范圍內(nèi)交織,就像解決一個棘手的數(shù)學方程。

        當你不能很容易地理解某件事時,一個好的方法是試著用它來解決問題。在本文中,我將演示如何使用作用域槽來構建可重用列表組件。

        詳解Vue.js中的作用域插槽

        基本組成部分

        我們要構建的組件叫做my-list,它顯示了很多東西。該特性的特殊之處在于,您可以自定義列表項在每次使用組件時的呈現(xiàn)方式。

        讓我們首先處理最簡單的用例,并獲取my-list來呈現(xiàn)一個列表:一個幾何形狀名稱數(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

        <div id="app">   <my-list></my-list></div><script type="text/x-template" id="my-list">   <div class="my-list">     <div class="title">{{ title }}</div>     <div class="list">       <div class="list-item" v-for="shape in shapes">         <div>{{ shape.name }} <small>({{ shape.sides }} sides)</small></div>       </div>     </div>   </div> </script>

        添加了一點CSS后,將會如下圖所示:

        詳解Vue.js中的作用域插槽

        泛化my-list

        現(xiàn)在,我們想要使my-list功能足夠多,以呈現(xiàn)任何類型的列表。第二個測試用例將是一個顏色列表,包括一個小樣本來顯示顏色。

        為此,我們必須抽象特定于形狀列表的任何數(shù)據(jù)。由于列表中的項的結構可能不同,我們將為my-list提供一個插槽,以便父列表可以定義任何特定列表的顯示方式。

        app.js

        Vue.component('my-list', {   template: '#my-list',   props: [ 'title' ] });

        index.html

        <script type="text/x-template" id="my-list">   <div class="my-list">     <div class="title">{{ title }}</div>     <div class="list">       <slot></slot>     </div>   </div> </script>

        現(xiàn)在讓我們在根實例中創(chuàng)建my-list組件的兩個實例來顯示我們的兩個測試用例列表:

        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' }     ]   } });
        <div id="app">   <my-list :title="Shapes">     <div class="list-item" v-for="item in shapes">       <div>{{ shape.name }} <small>({{ shape.sides }} sides)</small></div>     </div>   </my-list>   <my-list :title="Colors">     <div class="list-item" v-for="color in colors">       <div>         <div class="swatch" :style="{ background: color.hex }"></div>         {{ color.name }}      </div>     </div>   </my-list></div>

        就像這樣:

        詳解Vue.js中的作用域插槽

        表面成分

        我們剛剛創(chuàng)建的代碼工作得很好,但是代碼并不好。my-list是按名稱顯示列表的組件。但是我們已經(jīng)抽象了所有將列表呈現(xiàn)到父列表中的邏輯。組件只是用一些表示標記將列表包裝起來。

        考慮到組件的兩個聲明中仍然有重復的代碼(例如<div class="list-item" v-for="item in…"

        作用域的插槽

        為了實現(xiàn)這一點,我們將使用作用域槽而不是常規(guī)槽。作用域插槽允許您將模板傳遞給插槽,而不是傳遞呈現(xiàn)的元素。它被稱為“作用域”槽,因為盡管模板是在父作用域中呈現(xiàn)的,但它可以訪問特定的子數(shù)據(jù)。

        例如,具有作用域插槽的組件子組件可能如下所示。

        <div>   <slot my-prop="Hello from child"></slot> </div>

        使用此組件的父組件將在槽中聲明模板元素。此模板元素將具有一個屬性范圍,該范圍指定別名對象。添加到slot(在子模板中)的任何道具都可以作為別名對象的屬性使用。

        <child>   <template scope="props">     <span>Hello from parent</span>     <span>{{ props.my-prop }}</span>   </template> </child>

        顯示為:

        <div>   <span>Hello from parent</span>   <span>Hello from child</span> </div>

        在my-list中使用作用域插槽

        讓我們將列表數(shù)組作為道具傳遞給my-list。然后我們可以用作用域插槽替換插槽。這樣my-list就可以負責迭代列表項,但是父級仍然可以定義每個列表項應該如何顯示。

        index.html

        <div id="app">   <my-list title="Shapes" :items="shapes">     <!--template will go here-->   </my-list>   <my-list title="Colors" :items="colors">     <!--template will go here-->   </my-list>    </div>

        現(xiàn)在我們得到my-list來迭代這些項。在v-for循環(huán)中,item是當前列表項的別名。我們可以創(chuàng)建一個槽,并使用v-bind="item"將該列表項綁定到槽。

        app.js

        Vue.component('my-list', {   template: '#my-list',   props: [ 'title', 'items' ] });

        index.html

        <script type="text/x-template" id="my-list">   <div class="my-list">     <div class="title">{{ title }}</div>     <div class="list">       <div v-for="item in items">         <slot v-bind="item"></slot>       </div>     </div>   </div> </script>

        注意:如果您以前沒有見過v-bind在沒有參數(shù)的情況下使用,這將把整個對象的屬性綁定到元素。這對于作用域插槽非常有用,因為您綁定的對象通常具有任意屬性,現(xiàn)在不需要通過名稱指定這些屬性。

        現(xiàn)在我們將返回到根實例,并在my-list的slot中聲明一個模板。首先查看形狀列表,模板必須包含我們?yōu)槠浞峙鋭e名形狀的scope屬性。這個別名允許我們訪問限定范圍的道具。在模板內(nèi)部,我們可以使用與以前完全相同的標記來顯示形狀列表項。

        <my-list title="Shapes" :items="shapes">   <template scope="shape">     <div>{{ shape.name }} <small>({{ shape.sides }} sides)</small></div>   </template> </my-list>

        下面是完整的模板:

        <div id="app">   <my-list title="Shapes" :items="shapes">     <template scope="shape">       <div>{{ shape.name }} <small>({{ shape.sides }} sides)</small></div>     </template>   </my-list>   <my-list title="Colors" :items="colors">     <template scope="color">       <div>         <div class="swatch" :style="{ background: color.hex }"></div>         {{ color.name }}       </div>     </template>   </my-list>    </div>

        結論

        盡管這種方法和以前一樣有很多標記,但它將公共功能委托給了組件,從而實現(xiàn)了更健壯的設計。

        以下是完整代碼的代碼頁:

        https://codepen.io/anthonygore/pen/zExPZX

        贊(0)
        分享到: 更多 (0)
        網(wǎng)站地圖   滬ICP備18035694號-2    滬公網(wǎng)安備31011702889846號
        主站蜘蛛池模板: 国产99视频精品免费视频76| 在线精品国产一区二区三区| 国产一在线精品一区在线观看| 久久亚洲精品人成综合网| 精品第一国产综合精品蜜芽| 精品999久久久久久中文字幕 | 国产韩国精品一区二区三区| 国产日韩精品中文字无码| 亚洲精品无码专区2| 精品一区二区三区免费观看| 99精品国产一区二区| 国产精品爽黄69天堂a| 精品久久人妻av中文字幕| 色一乱一伦一图一区二区精品| 亚洲国产一成久久精品国产成人综合 | 精品多毛少妇人妻AV免费久久| 久久福利青草精品资源站免费 | 日韩精品久久久久久免费| 亚洲精品黄色视频在线观看免费资源| 国产精品永久免费| 成人国产精品秘 果冻传媒在线 | 亚洲第一区精品观看| 蜜桃麻豆www久久国产精品 | 久久国产精品偷99| 久久99精品久久久久久9蜜桃| 国产高清在线精品一本大道| 91亚洲精品自在在线观看| 欧美精品亚洲精品日韩| 四虎精品8848ys一区二区| 麻豆精品久久精品色综合| 久久精品国产半推半就| 精品999在线| 亚洲精品欧美综合在线| 久久精品男人影院| 2020最新久久久视精品爱| 99精品福利国产在线| 国产精品玖玖美女张开腿让男人桶爽免费看 | 成人精品一区二区三区免费看| 欧美精品人爱c欧美精品| 日韩欧美精品不卡| 欧美国产亚洲精品高清不卡|