详解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版的date函数(和PHP的date函数一样)
May 12 Javascript
JS实现判断碰撞的方法
Feb 11 Javascript
JavaScript将一个数组插入到另一个数组的方法
Mar 19 Javascript
js实现交换运动效果的方法
Apr 10 Javascript
基于jQuery倾斜打开侧边栏菜单特效代码
Sep 15 Javascript
JS封装cookie操作函数实例(设置、读取、删除)
Nov 17 Javascript
jQuery+css实现的tab切换标签(兼容各浏览器)
Jan 28 Javascript
微信小程序 vidao实现视频播放和弹幕的功能
Nov 02 Javascript
layer插件select选中默认值的方法
Aug 14 Javascript
JavaScript实现简单轮播图效果
Dec 01 Javascript
react项目如何使用iconfont的方法步骤
Mar 13 Javascript
在layui.use 中自定义 function 的正确方法
Sep 16 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
模拟OICQ的实现思路和核心程序(一)
2006/10/09 PHP
搜索附近的人PHP实现代码
2018/02/11 PHP
jquery 插件之仿“卓越亚马逊”首页弹出菜单效果
2008/12/25 Javascript
iframe 自适应高度[在IE6 IE7 FF下测试通过]
2009/04/13 Javascript
jQuery判断元素是否是隐藏的代码
2011/04/24 Javascript
可在线编辑网页文字效果代码(单击)
2013/03/02 Javascript
关于jQuery object and DOM element
2013/04/15 Javascript
使用jquery获取网页中图片高度的两种方法
2013/09/26 Javascript
调用DOM对象的focus使文本框获得焦点
2014/02/19 Javascript
JavaScript不使用prototype和new实现继承机制
2014/12/29 Javascript
jquery.qtip提示信息插件用法简单实例
2016/06/17 Javascript
jquery实现跳到底部,回到顶部效果的简单实例(类似锚)
2016/07/10 Javascript
Vue.js实现拖放效果的实例
2016/09/30 Javascript
BootStrap Validator对于隐藏域验证和程序赋值即时验证的问题浅析
2016/12/01 Javascript
JS中正则表达式要注意lastIndex属性
2017/08/08 Javascript
关于Ajax的原理以及代码封装详解
2017/09/08 Javascript
详解vue渲染函数render的使用
2017/12/12 Javascript
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
2018/01/25 jQuery
vuejs router history 配置到iis的方法
2018/09/20 Javascript
代码分析vue中如何配置less
2018/09/28 Javascript
vue最简单的前后端交互示例详解
2018/10/11 Javascript
小程序input数据双向绑定实现方法
2019/10/17 Javascript
javascript json对象小技巧之键名作为变量用法分析
2019/11/11 Javascript
微信小程序实现日历小功能
2020/11/18 Javascript
详解python使用Nginx和uWSGI来运行Python应用
2018/01/09 Python
python 实现屏幕录制示例
2019/12/23 Python
Python控制台输出时刷新当前行内容而不是输出新行的实现
2020/02/21 Python
python 实现rolling和apply函数的向下取值操作
2020/06/08 Python
Python xpath表达式如何实现数据处理
2020/06/13 Python
Python基于mediainfo批量重命名图片文件
2020/12/29 Python
世界上最值得信赖的多日游在线市场:TourRadar
2018/07/20 全球购物
写好求职应聘自荐信的三部曲
2013/09/21 职场文书
文言文辞职信
2015/02/28 职场文书
《追风筝的人》:人心中的成见是座大山,但请不忘初心
2019/11/15 职场文书
python 实现的截屏工具
2021/05/08 Python
浅谈MySql整型索引和字符串索引失效或隐式转换问题
2021/11/20 MySQL