vue3 component is 不显示_vue3 component 动态组件不显示

原因

通过名称传递必须先对其进行注册, 将组件本身传递给 is 而不是其名称，则不需要注册

<script>
import { Transition, TransitionGroup } from 'vue'

export default {
  components: {
    Transition,
    TransitionGroup
  }
}
</script>

<template>
  <component :is="isGroup ? 'TransitionGroup' : 'Transition'">
    ...
  </component>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

setup 写法

<script setup>    
    import TestOne from './components/TestOne.vue'    
    import TestTwo from './components/TestTwo.vue'    

    const tabs = [TestTwo, TestOne];    
    const title = 'Hello';    
</script>  
1
2
3
4
5
6
7

或者

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15