vue3动态组件如何使用

这篇“vue3动态组件如何使用”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“vue3动态组件如何使用”文章吧。

问题：为什么vue3需要对引入的组件使用markRow？

vue2

<template><div><component :is="A"></component></div></template><script>import A from './A';export default {name: 'Home',data() {return {}},components: { A },}

vue3

<template><ul><liv-for='(item,index) in tabList':key='index'@click='change(index)'>{{ item.name }}</li></ul><keep-alive><component :is="currentComponent"></component></keep-alive></template><script setup>import A from '../components/A.vue'import B from '../components/B.vue'import C from '../components/C.vue'let tabList = reactive([{name:'组件A',com:markRaw(A)},{name:'组件B',com:markRaw(B)},{name:'组件C',com:markRaw(C)}]);let currentComponent = reactive({com:tabList[0]});const change = ( idx )=>{currentComponent = tabList[idx].com;}

以上就是关于“vue3动态组件如何使用”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注编程网行业资讯频道。