2023 Vue直播班筆記 - Slot Props 進階應用

文章以個人清楚理解方式記錄

前言

我們都知道組件就好比一個容器，而容器內的物品我們不可能同時在給其他容器裝，所以它們之間平時無法互相溝通，不可互相調用。

但凡事總有例外，如果在特定情況下有需要使用到子組件內的資料的話要怎麼做呢？我們可以藉由子組件釋放出的部分將其內部的資料帶給父組件使用，以下面程式碼舉例。

單一傳遞

<div id="app">
  <h3>插巢 Prop</h3>
  <p>將元件內的變數取出使用，稱為 slot prop</p>
  <card>
    <template v-slot:default>
      我想取出元件的值來使用
    </template>
  </card>
</div>

<script type="module">
  const app = Vue.createApp({
    data() {
      return {
        product: {
          name: '蛋餅',
          price: 30,
          vegan: false
        }
      }
    },
  });
  app.component('card', {
    data() {
      return {
        product: {
          name: '蛋餅',
          price: 30,
          vegan: false
        },
      }
    },
    template: `<div class="card" style="width: 18rem;">
      <div class="card-body" >
        <slot :outsideProduct="product"></slot>
      </div>
    </div>`
  });

  app.mount('#app');

圖示很明顯card子組件釋放的slot成功被父組件使用了，

也就是父層的我想取出元件的值來使用，成功顯示在card子組件裡面。

接下來就可以將內部資料傳遞給外層使用了，

因此我們要對著slot下:outsideProduct=”product”。

前面的為傳給外層所使用的名稱，後面 "product" 為當前組件資料名稱。

裡面有資料傳出來了，當然外面父組件要負責接收，

因此要在父層 template 上面剛設定 v-slot 的地方，

後面補上接收用的變數名稱 "iGetData" 如圖所示。

由於 iGetData 是將內部有傳出來的資料都會納入其之內，

直接渲染{{iGetData}}會得到如圖

因此我們需要更內層的資料時，要對其物件取值，

接著可以這樣取{{iGetData.outsideProduct}}，

這樣就能把需要的資料過濾出來了。

多個傳遞使用

<div id="app">
  <h2>多個（解構）</h2>
  <card2 :product="product">
    <template #default="{product,veganName}">
      {{product}}
      {{veganName}}
    </template>
  </card2>
</div>

<script type="module">
  const app = Vue.createApp({
    data() {
      return {
        product: {
          name: '蛋餅',
          price: 30,
          vegan: false
        }
      }
    },
  });

  app.component('card2', {
    props: ['product'],
    data() {
      return {
        veganName: ''
      }
    },
    created() {
      this.veganName = this.product.vegan ? '素食' : '非素食';
    },
    template: `<div class="card" style="width: 18rem;">
      <div class="card-body" >
        <slot :product="product" :veganName="veganName"></slot>
      </div>
    </div>`
  })

  app.mount('#app');
</script>

注意!!! <card2 :product=”product”> </card>內的product為父傳子props

搞清楚程式碼的關係後，我們很清楚知道card2跟slot雖然都有product，

但是是不同用途的，因此在寫之前一定要先釐清用途避免搞混。

這次 slot 為傳第2組資料出去，分別為 product 跟 veganName ，

這時我們的外層就可以分開來接收了，

用甚麼名稱傳出就用甚麼名稱接收 #default=”{product,veganName}”，

下圖的兩種方法都行。

• joker
• 2024/02/17