如何通过Vue将一个组件引入另一个子组件中？

本文共计476个文字，预计阅读时间需要2分钟。

在Vue框架中使用vue-cli工具创建前端项目时，引入组件的步骤如下：

1. 使用vue-cli创建Vue项目 - 使用命令行工具，执行以下命令来创建一个新的Vue项目： vue create my-vue-project - 按照提示完成项目配置，文件结构将类似以下： my-vue-project/ ├── node_modules/ ├── public/ ├── src/ │ ├── assets/ │ ├── components/ │ ├── App.vue │ ├── main.js ├── .gitignore ├── package.json ├── package-lock.json └── README.md

2. 引入组件 - 在`src/components`目录下创建一个新的组件文件，例如`MyComponent.vue`。 - 在`MyComponent.vue`中编写组件的代码，如下所示：

vue

/* 组件样式 */

- 在`src/App.vue`的``标签中引入并使用该组件：

vue

/* 应用样式 */

现在，`MyComponent`组件已被成功引入并使用在`App.vue`中。

前端框架vue，在利用脚手架工具vue-cli创建前端项目时候，怎么引入组件呢？下面是详细的写法。

1、第一步，利用vue-cli创建一个vue前端项目，文件夹如下图

2、第二步，例子是在hom.vue界面引入子组件header.vue，如下图

3、第三步，给子组件header.vue命名一个全局的id，

export default { name: 'HomeHeader' }

代码如下图

4、第四步，返回home.vue组件，引用header.vue组件代码如下图

HomeHeader 对应上一步的命名；

首先引入界面

import HomeHeader from './pages/header'

然后渲染界面

export default {

name: 'home',

components: {

HomeHeader

}

}

5、第五步，进过引入界面和渲染界面后，可以在home.vue调用header.vue界面了，

<home-header></home-header>

对应HomeHeader大写变小写，连接处用-链接

如下图

6、第六步，运行项目，打开网页显示，子组件引入成功，如下图