vue3 component is 不显示

最新推荐文章于 2024-10-14 13:22:38 发布

原创最新推荐文章于 2024-10-14 13:22:38 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #vue.js

Vue 专栏收录该内容

20 篇文章

订阅专栏

文章介绍了在Vue中如何通过`is`属性动态注册Transition或TransitionGroup组件，以及两种常见的使用setup语法的方式，一是将导入的组件放在setup中，二是将组件声明在顶层script标签中。

原因

通过名称传递必须先对其进行注册, 将组件本身传递给 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>