一個(gè)案例搞懂Vue.js的作用域插槽

作者：Chor 2019-10-15 09:05:07

當(dāng)你無(wú)法理解一個(gè)東西的時(shí)候，最好的辦法就是在解決問(wèn)題的過(guò)程中體會(huì)它的應(yīng)用。本文將向你展示如何使用作用域插槽構(gòu)建一個(gè)可復(fù)用的列表組件。

作用域插槽是 Vue.js 中一個(gè)很有用的特性，可以顯著提高組件的通用性和可復(fù)用性。問(wèn)題在于，它實(shí)在不太好理解。嘗試搞清楚父子作用域之間錯(cuò)綜復(fù)雜的關(guān)系，其痛苦程度不亞于求解一個(gè)棘手的數(shù)學(xué)方程。

注意: 完整代碼可以去 Codepen 查看

最基礎(chǔ)的組件

我們即將構(gòu)建的組件叫做 my-list ，用來(lái)展示一系列的項(xiàng)目。它的特別之處就在于，你可以在每次使用組件的時(shí)候自定義列表項(xiàng)目的渲染方式。

我們先從最簡(jiǎn)單的單個(gè)列表開(kāi)始：一個(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

<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>

在加上一點(diǎn)樣式，大概就會(huì)是下圖這個(gè)樣子：

更通用的 my-list

現(xiàn)在我們想要讓 my-list 更加通用，可以渲染任何類型的列表。這次我們展示的是一堆顏色的名字以及對(duì)應(yīng)的顏色方塊。

為此，我們需要將上例列表獨(dú)有的數(shù)據(jù)進(jìn)行抽象化。由于列表中的項(xiàng)目可能有不同的結(jié)構(gòu)，我們將會(huì)給 my-list 一個(gè)插槽，讓父組件來(lái)定義列表的展示方式。

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)在，我們?cè)诟鶎?shí)例中創(chuàng)建 my-list 組件的兩個(gè)實(shí)例，分別展示兩個(gè)測(cè)試用例列表：lists:

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>

效果如下圖：

大材小用的組件

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

更糟糕的是，在兩個(gè)組件的聲明中存在著大量重復(fù)代碼（例如，<div class="list-item" v-for="item in ...">）。如果我們能夠在子組件中編寫(xiě)這些代碼，那么子組件就不再是“打醬油的角色”了。

作用域插槽

普通插槽無(wú)法滿足我們的需求，這時(shí)候，作用域插槽就派上用場(chǎng)了。作用域插槽允許你傳遞一個(gè)模板而不是已經(jīng)渲染好的元素給插槽。之所以叫做”作用域“插槽，是因?yàn)槟０咫m然是在父級(jí)作用域中渲染的，卻能拿到子組件的數(shù)據(jù)。

例如，帶有作用域插槽的組件 child 大概是下面這個(gè)樣子：

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

使用這個(gè)組件的父組件將會(huì)在插槽中聲明一個(gè) template 元素。這個(gè)模板元素會(huì)有一個(gè) scope （譯者注：Vue 2.6 后改為 v-slot 屬性）屬性指向一個(gè)對(duì)象，任何添加到插槽（位于子組件模板）中的屬性都會(huì)作為這個(gè)對(duì)象的屬性。

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

將會(huì)渲染成：

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

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

我們將兩個(gè)列表數(shù)組通過(guò) props 傳遞給 my-list。之后將普通插槽替換為作用域插槽，這樣，my-list 就能夠負(fù)責(zé)迭代列表項(xiàng)目，同時(shí)父組件依然能夠定義每個(gè)項(xiàng)目具體的展示方式。

index.html

<div id="app">  
  <my-list title="Shapes" :items="shapes">  
    <!--在這里書(shū)寫(xiě) template-->  
  </my-list>  
  <my-list title="Colors" :items="colors">  
    <!--在這里書(shū)寫(xiě) template-->  
  </my-list>     
</div>

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

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>

注意：也許你之前沒(méi)見(jiàn)過(guò)不帶參數(shù)的 v-bind 用法。這種用法將會(huì)把整個(gè)對(duì)象的所以屬性都綁定到當(dāng)前元素上。在涉及作用域插槽時(shí)，這種用法很常見(jiàn)，因?yàn)榻壎ǖ膶?duì)象可能有很多屬性，而一一將它們列舉出來(lái)并手動(dòng)綁定顯然太麻煩了。

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

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

整個(gè)模板大概是下面這樣：

<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>