vue3 component is 不显示

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

MAIMIHO

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

阅读量827

点赞数

分类专栏： Vue 文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/maimiho/article/details/134191799

版权

Vue 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

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

摘要由CSDN通过智能技术生成

原因

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