常規情況下，在裡動態載入不同元件的方式為:

<template>
    <!--  符合條件A，載入元件A -->
    <BusinessComponentA  v-if="condition==''A" />
    <!--  符合條件B，載入元件B -->
    <BusinessComponentB  v-if="condition=='B'" />
    <!--  符合條件C，載入元件C -->
    <BusinessComponentC  v-if="condition=='C'" />
</template>
 

這種方式的問題，就是如果有很多種業務場景，那麼在template裡就需要寫很多的分支.

✅ 解決辦法： 根據業務條件動態去匹配應該載入的業務元件，完整程式碼如下

  <template>
  <div class="business-container">
    <!--