vue3 component is 不显示的问题及解决
作者：MAIMIHO
这篇文章主要介绍了vue3 component is 不显示的问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue3 component is 不显示
原因
通过名称传递必须先对其进行注册, 将组件本身传递给 is 而不是其名称，则不需要注册
<script>
import { Transition, TransitionGroup } from 'vue'
export default {
components: {
Transition,
TransitionGroup
}
}
</script>
<template>
<component :is="isGroup ? 'TransitionGroup' : 'Transition'">
...
</component>
</template>
setup 写法
<script setup>
import TestOne from './components/TestOne.vue'
import TestTwo from './components/TestTwo.vue'
const tabs = [TestTwo, TestOne];
const title = 'Hello';
</script>
或者
<script setup>
const tabs = [TestTwo, TestOne];
const title = 'Hello';
</script>
<script>
import TestOne from './components/TestOne.vue'
import TestTwo from './components/TestTwo.vue'
export default {
components: {
TestOne,
TestTwo
}
}
</script>
vue动态组件component:is的使用？
vue 动态组件用于实现在指定位置上，动态加载不同的组件，核心代码为：
<component :is="componentTag"></component>
data() {
return {
componentTag: '',
}
}componentTag 为自定义的变量，将需要加载的组件名赋值给它，即可在<component />标签出现的位置，渲染该组件。
这个是vue的组件，is=要渲染的组件，不会更新路由，不会更新初始化函数mounted和created。
刷新页面后会跳回默认显示页面；
缺点
需要引入所有要显示的组件，并且components:{声明}
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。