vue3笔记五(:is 动态组件)

1、注意事项

1、在Vue2 的时候is是通过组件名称切换的，在Vue3 setup是通过组件实例切换的

2、如果直接把组件实例放到reactive中代理，vue会发出警告。告知我们可以通过shallowRef 或者 markRaw 跳过proxy 代理。
因为组件实例进行响应式代理毫无意义，且浪费性能

2、:is 动态组件使用

子组件通过defineProps接受传参

<template>
  <div class="content">
    <div class="tabs" v-for="item in tabArr" :key="item.name" @click="tabChange(item.comName)">
      {{ item.name }}
    </div>
  </div>
  <component :is="currentCom"></component>
</template>

<script setup lang="ts">
  import { ref, reactive, markRaw } from 'vue'
  import A from './A.vue'
  import B from './B.vue'
  import C from './C.vue'

  type Tab = {
    name: string,
    comName: any
  }

  // 从复杂数据类型中取出自己想要的几个属性
  type Com = Pick<Tab, 'comName'>

  const tabArr = reactive<Tab[]>([
    {
      name: 'A组件',
      comName: markRaw(A)
    },
    {
      name: 'B组件',
      comName: markRaw(B)
    },
    {
      name: 'C组件',
      comName: markRaw(C)
    },
  ])

  const currentCom = ref<Com>(tabArr[0].comName)

  const tabChange = (item: Com) => {
    currentCom.value = item
  }
</script>

<style>
  .content {
    display: flex;
    padding: 20px;
    height: 40px;
    width: 100vw;
    background: #f1f1f1;
  }
  .tabs {
    width: 100px;
    height: 40px;
    background: #ffffff;
    margin-right: 5px;
    border: 1px solid #000;
  }
</style>

原文链接：https://xiaoman.blog.csdn.net/article/details/122891279