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'  });

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

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)
      

效果如下圖：

大材小用的組件

我們剛才創(chuàng)建的組件確實(shí)符合要求，但那段代碼算不上很好。my-list 本來應(yīng)該是一個展示列表的組件，但我們卻把渲染列表需要的邏輯部分抽象到了父組件中，這樣一來，子組件在這里只不過是用來包裹列表而已，未免顯得大材小用了。

更糟糕的是，在兩個組件的聲明中存在著大量重復(fù)代碼（例如，

          Hello from parent      {{ props.my-prop }}      

    Hello from parent    Hello from child  

接著我們讓 my-list 迭代項(xiàng)目。在 v-for 循環(huán)中，item 是當(dāng)前迭代項(xiàng)目的別名。我們可以創(chuàng)建一個插槽并通過 v-bind="item" 將那個項(xiàng)目綁定到插槽中。

app.js

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

index.html

注意：也許你之前沒見過不帶參數(shù)的 v-bind 用法。這種用法將會把整個對象的所以屬性都綁定到當(dāng)前元素上。在涉及作用域插槽時，這種用法很常見，因?yàn)榻壎ǖ膶ο罂赡苡泻芏鄬傩?，而一一將它們列舉出來并手動綁定顯然太麻煩了。

現(xiàn)在，回到根實(shí)例這里來，在 my-list 的插槽中聲明一個模板。首先看一下幾何圖形列表（第一個例子中的列表），我們聲明的模板必須帶有一個 scope 屬性，這里將其賦值為 shape。shape 這個別名可以讓我們訪問作用域插槽。在模板中，我們可以繼續(xù)沿用最初例子中的標(biāo)記來展示項(xiàng)目。

          
{{ shape.name }} ({{ shape.sides }} sides)
      

整個模板大概是下面這樣：

                  
{{ shape.name }} ({{ shape.sides }} sides)
                            
          
          {{ color.name }}                       

結(jié)論

雖然用上作用域插槽之后，代碼量并未減少，但是我們將通用的功能都交由子組件負(fù)責(zé)，這顯著提高了代碼的健壯性。

到此，關(guān)于“Vue.js的作用域插槽的介紹以及使用場景”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！