vue3 动态组件及vue2 动态组件使用

第一种情况：vue3 动态组件

1 template 模板

<template>

     <div class="components">

      <div @click="switchCom(item)" :key="item.name" v-for="item in data" >

        {{ item.name }}

      </div>

      <!--vue3 动态组件 -->

      <component :is="current.comName"></component>

    </div>

</template>

2   script 模板

<script setup lang='ts'>

import{ ref, reactive, markRaw, toRaw } from 'vue'

import A from './A.vue';

import B from './B.vue';

import C from './C.vue';

type Tabs = {

  name:string,

  comName:any,

}

type Comm = Pick<Tabs,'comName'>

//proxy

const data = reactive<Tabs[]>([

  {

    name:'我是A组件',

    comName:markRaw(A)

  },

  {

    name:'我是B组件',

    comName:markRaw(B)

  },

  {

    name:'我是C组件',

    comName:markRaw(C)

  }

])

let current = reactive<Comm>({

  comName:data[0].comName

})

const switchCom = (item:Tabs) =>{

  current.comName = item.comName;

}

</script>

3  A.vue 相关组件，其他类似

<template>

  <div class="a">

    aaaaa

  </div>

</template>

<script setup lang='ts'>

import{ref,reactive} from 'vue'

</script>

<style scoped>

  .a{

    background: red;

    height: 100px;

    border: 1px solid #ccc;

  }

</style>

第二种情况 vue2 动态组件：

<template>

  <div>

    <!-- 这种方式是好用的 -->

    <!-- <component :is="A"></component> -->

    <!--

      1 vue 这种方式是不好用的, 因为setup和组件没有任何关联。

      2 使用老的<script> 是可以的。

    -->

    <component is="A"></component>

  </div>

</template>

<script setup lang='ts'>

  //默认主要页面

  import A from './components/zj.vue'

  import{ref,reactive} from 'vue'

</script>

 

<script lang="ts">

  //vue 老的写法应用组件

  export default{

    components:{

      A

    }

  }

</script>