详解vue引入子组件方法


Posted in Javascript onFebruary 12, 2019

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

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

详解vue引入子组件方法

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

详解vue引入子组件方法

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

export default {

 name: 'HomeHeader'

}

代码如下图

详解vue引入子组件方法

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

HomeHeader 对应上一步的命名;

首先引入界面

import HomeHeader from './pages/header'

然后渲染界面

export default {

name: 'home',

components: {

HomeHeader

}

}

详解vue引入子组件方法

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

<home-header></home-header>

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

如下图

详解vue引入子组件方法

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

详解vue引入子组件方法

Javascript 相关文章推荐
js函数使用技巧之 setTimeout(function(){},0)
Feb 09 Javascript
javscript对象原型的一些看法
Sep 19 Javascript
js选择并转移导航菜单示例代码
Aug 19 Javascript
JQuery中的html()、text()、val()区别示例介绍
Sep 01 Javascript
js实现下拉框选择要显示图片的方法
Feb 16 Javascript
JQuery实现鼠标移动图片显示描述层的方法
Jun 25 Javascript
jQuery实现删除li节点的方法
Dec 06 Javascript
利用HTML5+Socket.io实现摇一摇控制PC端歌曲切换
Jan 13 Javascript
AngularJS学习笔记之表单验证功能实例详解
Jul 06 Javascript
JavaScript 数组的进化与性能分析
Sep 18 Javascript
jQuery利用cookie 实现本地收藏功能(不重复无需多次命名)
Nov 07 jQuery
node.js使用http模块创建服务器和客户端完整示例
Feb 10 Javascript
vue组件之间数据传递的方法实例分析
Feb 12 #Javascript
vue添加class样式实例讲解
Feb 12 #Javascript
Vue中使用canvas方法总结
Feb 12 #Javascript
通过npm或yarn自动生成vue组件的方法示例
Feb 12 #Javascript
js实现json数组分组合并操作示例
Feb 12 #Javascript
vue文件运行的方法教学
Feb 12 #Javascript
vue的for循环使用方法
Feb 12 #Javascript
You might like
php实现批量下载百度云盘文件例子分享
2014/04/10 PHP
php实现发送微信模板消息的方法
2015/03/07 PHP
PHP模拟QQ登录的方法
2015/07/29 PHP
用JavaScript页面不刷新时全选择,全删除(GridView)
2009/04/14 Javascript
基于prototype扩展的JavaScript常用函数库
2010/11/30 Javascript
js给onclick赋值传参数的两种方法
2013/11/25 Javascript
javascript替换已有元素replaceChild()使用介绍
2014/04/03 Javascript
javascript实现2048游戏示例
2014/05/04 Javascript
JQuery插件iScroll实现下拉刷新,滚动翻页特效
2014/06/22 Javascript
javascript模拟post提交隐藏地址栏的参数
2014/09/03 Javascript
JavaScript中string转换成number介绍
2014/12/31 Javascript
Jquery Ajax xmlhttp请求成功问题
2015/02/04 Javascript
javaScript的函数对象的声明详解
2015/02/06 Javascript
原生JS实现LOADING效果
2015/03/16 Javascript
JavaScript实现简易的天数计算器实例【附demo源码下载】
2017/01/18 Javascript
JQuery中Ajax的操作完整例子
2017/03/07 Javascript
js input输入百分号保存数据库失败的解决方法
2018/05/26 Javascript
angularjs使用div模拟textarea文本框的方法
2018/10/02 Javascript
JS原型与继承操作示例
2019/05/09 Javascript
原生JS使用Canvas实现拖拽式绘图功能
2019/06/05 Javascript
javascript(基于jQuery)实现鼠标获取选中的文字示例【测试可用】
2019/10/26 jQuery
vue+elementui 对话框取消 表单验证重置示例
2019/10/29 Javascript
9种方法优化jQuery代码详解
2020/02/04 jQuery
Python中获取网页状态码的两个方法
2014/11/03 Python
python基础练习之几个简单的游戏
2017/11/10 Python
numpy中以文本的方式存储以及读取数据方法
2018/06/04 Python
python topN 取最大的N个数或最小的N个数方法
2018/06/04 Python
Python输出指定字符串的方法
2020/02/06 Python
PyQt5高级界面控件之QTableWidget的具体使用方法
2020/02/23 Python
pandas实现导出数据的四种方式
2020/12/13 Python
详解通过HTML5 Canvas实现图片的平移及旋转变化的方法
2016/03/22 HTML / CSS
canvas实现图片镜像翻转的2种方式
2020/07/22 HTML / CSS
美国演唱会订票网站:Ticketmaster美国
2017/10/05 全球购物
2014年银行个人工作总结
2014/12/05 职场文书
运动与健康自我评价
2015/03/09 职场文书
python中validators库的使用方法详解
2022/09/23 Python