问题:为什么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动态组件如何使用的详细内容。