vue3.2之组件

目录

一、基础使用

二、动态路由

三、组件别名

四、命名空间组件

---

一、基础使用

<script setup>
import Bar from './Bar.vue'
</script>

<template>
    <Bar />
</template>

总结：引入就可以使用， 不用注册

二、动态路由

<script setup>
import { ref } from 'vue'
import Bar from './Bar.vue'
import Foo from './Foo.vue'
const flag = ref(false)
</script>

<template>
    <Bar :is="flag ? Bar : Foo" />
</template>

三、组件别名

<script setup>
import {Bar as NewBar} from './Bar.vue'
</script>

<template>
    <NewBar />
</template>

四、命名空间组件

• components/index.ts

import Foo from './Foo.vue'
import Bar from './Bar.vue'

export { Foo, Bar }

•  index.vue

<script setup>
import * as aa from "./Components"
</script>

<template>
    <aa.Foo>
    <aa.Bar>
</template>