vue3动态组件未渲染问题

原创已于 2024-03-14 15:32:02 修改 · 1.1k 阅读

5 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js #前端 #javascript

收录于

于 2024-03-14 15:28:14 首次发布

本文讲述了在Vue3中使用`<component:is>`动态组件时遇到的问题，由于setup语法糖的影响，需用shallowReactive转换。通过实例展示了如何在左侧菜单点击事件中切换组件并解决动态组件失效问题。

渲染问题

在这里插入图片描述

component动态组件写法与vue2写法一致，代码如下：

<component :is="componentName"/>

<script setup>
	import { ref } from 'vue'
	import account from './user/account.vue'
	// 组件名称
	const componentName = ref('account')
	// 点击左侧菜单
	const onChangeTab = (name) => {
		componentName.value = name
	}
</script>

解决方法

由于使用setup语法糖时，动态组件失效，所以需要使用shallowReactive()转换下

<component :is="dom[componentName]"/>

	import { ref, shallowReactive } from 'vue'
	import account from './user/account.vue'
	import password from './user/password.vue'
	const dom = shallowReactive({
		account,
		password
	})
	// 组件名称
	const componentName = ref('account')
	// 点击左侧菜单
	const onChangeTab = (name) => {
		componentName.value = name
	}