Vue.js 從零開始：Slot

2021 iThome 鐵人賽

DAY 22

自我挑戰組

Vue.js 從零開始系列第 22 篇

13th鐵人賽

magic0308

2021-10-06 14:18:36

1317 瀏覽

分享至

學完component是怎麼傳遞之後，看似完美，如果某天PM丟出一個需求，初步了解狀況後，發現有很多地方都可以組成元件來重複使用，但其實沒有這麼簡單，看起來一樣的區塊，其實裏面有很多結構不一樣，這時就可以針對裡面的小區域去做修改。

`Slot`

Vue官網翻譯Slot為插槽，我聯想到線上遊戲的武器，也會有各種插槽，用這個方式去想會比較容易理解：

你的人物角色就像是外部元件，你的名刀不知火就是內元件，遊戲系統有卡片功能，卡片可以插在你的道具上面（內元件），卡片就是你想要的從外部放入的文字，但前提是道具要打洞成插槽：

<div id="app">
  <h3> {{ text }} </h3>
  <out-text>
    <p>打洞成功</p>
  </out-text>
  <out-text>
  </out-text>
</div>

const app = Vue.createApp({
  data() {
    return {
      text: "外層元件",
      product: {
        name: "名刀不知火",
        price: 200000,
      }
    }
  }
});
app.component("outText",{
  template: `
  <div class="box">
    <h3> {{ text }} </h3>
    <div class="header">header</div>
    <div class="main">
      <slot> 預設值！</slot>
    </div>
    <div class="footer">footer</div>
  </div>
  `,
  data() {
    return {
      text: "內部元件",
      num: 3,
    };
  }
});
app.mount("#app");

內層元件的模板某區塊如果要由外層元件定義時，子元件一定要加上slot，外層元件的模板打洞成功才能正常顯示。
如果外層元件的模板，沒有任何元素時，就會顯示<slot> 預設值！</slot>，可以觀察兩個子元件畫面渲染的差異。

`slot` 具名插槽

一把武器只有一個插槽那怎麼夠啊！那我要四個該怎麼做呢？

這種情況握緊拳頭是沒有用的，在建立四個插槽需要先瞭解slot有個屬性：name，可以使用它來為插槽命名，子元件模板則使用v-slot讓外層傳遞到子元件：

<div id="app">
    <h3> {{ product.name }} </h3>
    <out-text>
        <template v-slot:header>波利卡片</template>
        <template v-slot:main>瘋兔卡片</template>
        <template v-slot:default></template>
        <template v-slot:footer>禿鷹卡片</template>
    </out-text>
</div>

const app = Vue.createApp({
  data() {
    return {
      text: "外層元件",
      product: {
        name: "名刀不知火",
        price: 200000,
      }
    }
  }
});
app.component("outText",{
  template: `
  <div class="box">
    <div class="header">
      <slot name="header"></slot>
    </div>
    <div class="main">
      <slot name="main"></slot>
        <div>
            <slot>未插卡！</slot>
        </div>
    </div>
    <div class="footer">
      <slot name="footer"></slot>
    </div>
  </div>
  `,
  data() {
    return {
      text: "內部元件",
      num: 3,
    };
  }
});
app.mount("#app");

v-slot:header可以改為#header的寫法較為簡潔，v-slot:default預設如果主元件沒有值，就會由<slot>未插卡！</slot>來代替。

`slot`作用域

先來觀察這段程式碼，並猜想畫面會是什麼呢?

<div id="app">
  <h3> {{ product.name }} </h3>
  
  <out-text>
    <p> {{ product.name }} </p>
  </out-text>
</div>

const app = Vue.createApp({
  data() {
    return {
      text: "外層元件",
      product: {
        name: "名刀不知火",
        price: 200000,
      }
    }
  }
});
app.component("outText",{
  template: `
  <div class="box">
  </div>
  `,
  data() {
    return {
      text: "內部元件",
      product: {
        name: "+9 獵人之弓",
        price: 100000,
      }
    };
  }
});
app.mount("#app");

。
。
。
。
答案是只會顯示外層元件data裡的product.name，因為兩個元件雖然都有一樣product，但各自元件有屬於自己的data與作用域，兩個product是不同的屬性。
<out-text><p> {{ product.name }} </p></out-text>會無法顯示，是因為Vue在編譯時，會以元件模板定義內容為主，會忽略掉{{ product.name }} ，除非在子元件模板加上slot。