vue3导入子组件的两种方式

2024-11-13 1,238 阅读1分钟

局部导入（在组件内部使用）
- 步骤一：创建子组件文件
  - 假设你有一个子组件ChildComponent.vue，其内容如下：

<template>
  <div>
    我是子组件
  </div>
</template>
<script setup>
// 这里可以添加子组件的逻辑，如数据定义、方法等
</script>

步骤二：在父组件中导入并使用子组件
- 在父组件（比如ParentComponent.vue）中，通过以下方式导入子组件：

<template>
  <div>
    <ChildComponent />
  </div>
</template>
<script setup>
import ChildComponent from './ChildComponent.vue';
</script>

这里import ChildComponent from './ChildComponent.vue';语句是在script setup标签内部，从相对路径./ChildComponent.vue导入了ChildComponent，然后在模板部分<template>中像使用 HTML 标签一样使用<ChildComponent />来渲染子组件。

全局导入（在应用级别使用）
- 步骤一：在应用入口文件中导入并注册子组件
  - 在main.js（或main.ts）文件中，按照以下步骤操作。假设还是ChildComponent.vue这个子组件：

import { createApp } from 'vue';
import App from './App.vue';
import ChildComponent from './ChildComponent.vue';
const app = createApp(App);
app.component('ChildComponent', ChildComponent);
app.mount('#app');

首先通过import语句导入ChildComponent.vue文件。然后使用app.component('ChildComponent', ChildComponent);语句将ChildComponent注册为全局组件，其中'ChildComponent'是组件在模板中的标签名，ChildComponent是导入的组件对象。
步骤二：在任何组件中使用全局子组件
- 经过全局注册后，在应用的任何组件的模板部分，都可以直接使用<ChildComponent />来渲染子组件，不需要在每个组件内部单独导入。例如在AnotherComponent.vue中：

<template>
  <div>
    <ChildComponent />
  </div>
</template>