「譯」一個案例搞懂 Vue.js 的做用域插槽

時間 2019-11-06

標籤一個案例 vue.js vue 插槽欄目 JavaScript 简体版

原文原文鏈接

原文地址：Getting Your Head Around Vue.js Scoped Slots

原文做者：Anthony Gore

譯者：Chor

做用域插槽是 Vue.js 中一個頗有用的特性，能夠顯著提升組件的通用性和可複用性。問題在於，它實在不太好理解。嘗試搞清楚父子做用域之間錯綜複雜的關係，其痛苦程度不亞於求解一個棘手的數學方程。html

當你沒法理解一個東西的時候，最好的辦法就是在解決問題的過程當中體會它的應用。本文將向你展現如何使用做用域插槽構建一個可複用的列表組件。vue

注意: 完整代碼能夠去 Codepen 查看

最基礎的組件

咱們即將構建的組件叫作 my-list ，用來展現一系列的項目。它的特別之處就在於，你能夠在每次使用組件的時候自定義列表項目的渲染方式。數組

咱們先從最簡單的單個列表開始：一個包含幾何圖形名字和邊數的數組。app

app.jside

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>

在加上一點樣式，大概就會是下圖這個樣子：spa

更通用的 `my-list`

如今咱們想要讓 my-list 更加通用，能夠渲染任何類型的列表。此次咱們展現的是一堆顏色的名字以及對應的顏色方塊。3d

爲此，咱們須要將上例列表獨有的數據進行抽象化。因爲列表中的項目可能有不一樣的結構，咱們將會給 my-list 一個插槽，讓父組件來定義列表的展現方式。code

app.jscomponent

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>

如今，咱們在根實例中建立 my-list 組件的兩個實例，分別展現兩個測試用例列表：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>

效果以下圖：

大材小用的組件

咱們剛纔建立的組件確實符合要求，但那段代碼算不上很好。my-list 原本應該是一個展現列表的組件，但咱們卻把渲染列表須要的邏輯部分抽象到了父組件中，這樣一來，子組件在這裏只不過是用來包裹列表而已，未免顯得大材小用了。

更糟糕的是，在兩個組件的聲明中存在着大量重複代碼（例如，<div class="list-item" v-for="item in ...">）。若是咱們可以在子組件中編寫這些代碼，那麼子組件就再也不是「打醬油的角色」了。

做用域插槽

普通插槽沒法知足咱們的需求，這時候，做用域插槽就派上用場了。做用域插槽容許你傳遞一個模板而不是已經渲染好的元素給插槽。之因此叫作」做用域「插槽，是由於模板雖然是在父級做用域中渲染的，卻能拿到子組件的數據。

例如，帶有做用域插槽的組件 child 大概是下面這個樣子：

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

使用這個組件的父組件將會在插槽中聲明一個 template 元素。這個模板元素會有一個 scope （譯者注：Vue 2.6 後改成 v-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` 中使用做用域插槽

咱們將兩個列表數組經過 props 傳遞給 my-list。以後將普通插槽替換爲做用域插槽，這樣，my-list 就可以負責迭代列表項目，同時父組件依然可以定義每一個項目具體的展現方式。

index.html

<div id="app">
  <my-list title="Shapes" :items="shapes">
    <!--在這裏書寫 template-->
  </my-list>
  <my-list title="Colors" :items="colors">
    <!--在這裏書寫 template-->
  </my-list>   
</div>

接着咱們讓 my-list 迭代項目。在 v-for 循環中，item 是當前迭代項目的別名。咱們能夠建立一個插槽並經過 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 用法。這種用法將會把整個對象的因此屬性都綁定到當前元素上。在涉及做用域插槽時，這種用法很常見，由於綁定的對象可能有不少屬性，而一一將它們列舉出來並手動綁定顯然太麻煩了。

如今，回到根實例這裏來，在 my-list 的插槽中聲明一個模板。首先看一下幾何圖形列表（第一個例子中的列表），咱們聲明的模板必須帶有一個 scope 屬性，這裏將其賦值爲 shape。shape 這個別名可讓咱們訪問做用域插槽。在模板中，咱們能夠繼續沿用最初例子中的標記來展現項目。

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