vue3动态组件怎么使用

这篇文章主要介绍“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动态组件怎么使用”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！