VUE3中使用动态组件

有时候一个页面中我们需要加载很多个组件，而且这些组件需要根据服务器请求的数据来判断该用哪个组件。

举个使用场景：我们在做IM或者客服软件，在加载聊天记录的时候，就要根据服务器给出不同类型的消息加载不同的消息组件，有文本，图片，视频，音频，表情，附件等等。

如果我们用v-if也是可以做的，在组件多的情况下代码看起来就特别的臃肿，那么我们这个时候就可以用动态组件来做这个事情。

我们使用vue框架提供的动态组件component来做。

<component :is="item.component" v-for="(item,index) in messageList":key="index" :message="item"></component>

如果此代码放在vue2中是完全没有问题的，因为item.component是动态的组件名称。如果在vue3中就无效了。

原因是vue3使用的是组件实例，不再是组件名称。

那么我们需要添加一些东西

<script setup>
import ComA "./ComponentA";
import ComB "./ComponentB";

defineOptions({
  components: {
    ComA , ComB 
  }
})

</script>

我看网络上有写说用resolveComponent动态实例化，如下：

<component :is="resolveComponent(item.component)" v-for="(item,index) in messageList":key="index" :message="item"></component>


<script setup>
import {resolveComponent} from "vue";
import ComA "./ComponentA";
import ComB "./ComponentB";

</script>

在本人电脑上尝试无效果。