创建三个vue子组件,A.vue,B.vue,C.vue,例:
<template>
<div>A component</div>
</template>
<script setup lang="ts"></script>
<style scoped></style>
创建child.js引入这三个组件并暴露出来
// child.js
// 引入组件
import ComponentA from './A.vue'
import ComponentB from './B.vue'
import ComponentC from './C.vue'
// 抛出组件
export {
ComponentA,
ComponentB,
ComponentC
}
定义父组件,引入子组件:
<!-- father.vue -->
<template>
<div>
<h2>我是父组件!</h2>
<!-- 使用三个组件 -->
<Child.ComponentA></Child.ComponentA>
<Child.ComponentB></Child.ComponentB>
<Child.ComponentC></Child.ComponentC>
</div>
</template>
<script setup>
// 从 child.js 中引入三个组件
import * as Child from "./child";
</script>