vue.js中注册组件的方法：1、使用extend，代码为【var com1 = Vue.extend({template:’这是第一种方式’})】；2、在页面上定义外部template元素。
本教程操作环境：windows10系统、vue2.5.2，本文适用于所有品牌的电脑。
【相关文章推荐：vue.js】
vue.js中注册组件的方法：
第一种方式 extend:
立即学习“前端免费学习笔记（深入）”；
vue.js中这样写：
var com1 = Vue.extend({ template:'这是第一种方式
'});Vue.component("myCom1",com1);
登录后复制
注：myCom1是采用的驼峰命名方式，所以html中这样写：
登录后复制
注：如果不采用驼峰命名方式，js和html中这样写：
vue.js中这样写：
var com1 = Vue.extend({ template:'这是第一种方式
'});Vue.component("mycom1",com1);
登录后复制
html中写法：
登录后复制登录后复制
上面可以不使用中间变量，即把com1的内容直接写在Vue.component(“mycom1”,com1)里面，如：
Vue.component("mycom1",Vue.extend({ template:'这是第一种方式
'}));
登录后复制
第二种方式：不用extend
vue.js中这样写：
Vue.component("mycom1",{ template:'这是h3标签
这是span标签'});
登录后复制
注：不论是哪种方式创建出来的组件，必须只有一个根元素，即多个html元素的时候，要用一个div包裹
html中依旧写成：
登录后复制登录后复制
第三种：在页面上定义外部template元素
vue.js中这样写：
Vue.component("mycom1",{ template:'#temp'});
登录后复制
html中写template结构：
这是html中的temp
登录后复制
PS：以上是全局注册，局部注册如下：
第一种局部注册：
js文件中写：
var vm = new Vue({ el:"#newBrand", data:{}, components:{ mycom1:{ template: '这是局部template
' } }});
登录后复制
html文件中写：
登录后复制
第二种局部注册：
js文件中这样写：
var vm = new Vue({ el:"#newBrand", data:{}, components:{ mycom1:{ template: '#temp' } }});
登录后复制
html文件中写法：
这是局部template啦
登录后复制
相关免费学习推荐：JavaScript（视频）
以上就是vue.js中如何注册组件的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/3022414.html
