前端框架 vue, 在利用脚手架工具 vue-cli 创建前端项目时候, 怎么引入组件呢? 下面本篇文章给大家介绍一下引入子组件的方法. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
vue.js 中怎么引入子组件?
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, 第六步, 运行项目, 打开网页显示, 子组件引入成功, 如下图
更多 web 前端开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/vue-js/17090.html