iT邦幫忙

2023 iThome 鐵人賽

DAY 24
0
Vue.js

.NET Core與Vue3組合開發技系列 第 24

[Day 24] 父子組件常見操作_part4.vue動態組件實作

  • 分享至 

  • xImage
  •  

Vue 中的動態組件是指當在父組件中需要對多個子組件進行來回的切換,此時就能使用動態組件來實現。
例如,將 comp1.vue、comp2.vue 和 comp3.vue 做成一組切換,每次只能呈現一個組件。
當切換到 comp2.vue 組件時,comp1.vue 和 comp3.vue 組件從頁面卸載,只讓 comp2.vue 組件渲染。

動態組件的功能是在父組件或根組件上使用的,需要事先將切換的多個組件導入。

然後在 HTML 模板< template >中,使用固定的< component >元素來載入組件。

語法如下:

<component :is="tabs[currentTab]"></component>

< component >是元素裡面的 :is 是屬性,加上冒號(:is)表示可以動態變化,可使用響應式的變數。
tabs 是一個數組的名稱,該名稱是任意的,該數組中存放導入或註冊的組件名稱。
[currentTab]是一個動態匹配的模式,[]中括號是固定的,currentTab 代表一個響應式變數,其值必須為 tabs 數組中的某個組件名。

在此用兩個組件在 App.vue 中來回切換,模擬動態組件的實作。
於src/components目錄下產生comp1.vue 跟 comp2.vue
comp1.vue

<!-- eslint-disable --> 
<template>
    <div class="m-3 alert alert-info">
        component 1
    </div>
</template>

comp2.vue

<!-- eslint-disable --> 
<template>
    <div class="m-3 alert alert-success">
        component 2
    </div>
</template>

回到我們的 App.vue

<template>
  <main>
    <component :is="tabs[curTab]"></component>
  </main>
</template>

<script setup>
  import comp1 from './components/comp1.vue';
  import comp2 from './components/comp2.vue';
  import {ref} from 'vue';

  const tabs = {
    comp1,
    comp2
  };

  const curTab = ref('comp2');
</script>

https://ithelp.ithome.com.tw/upload/images/20231003/201074526OBKLNTxDW.png

也可切換
const curTab = ref('comp1');
https://ithelp.ithome.com.tw/upload/images/20231003/20107452MvsaZzsAz2.png

本篇已同步發表至個人部落格
https://coolmandiary.blogspot.com/2023/10/2023day-24-part4vue.html


上一篇
[Day 23] 父子組件常見操作_part3.(slots插槽)
下一篇
[Day 25] 父子組件常見操作_part5.跨組件屬性傳遞(子組件單或多個根元素)
系列文
.NET Core與Vue3組合開發技30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言