vue.js中注册组件的方法：1、使用extend，代码为【var com1 = Vue.extend({template:'<h3>这是第一种方式</h3>'})】；2、在页面上定义外部template元素。
本教程操作环境：windows10系统、vue2.5.2，本文适用于所有品牌的电脑。
【相关文章推荐：vue.js】
vue.js中注册组件的方法：
第一种方式 extend:
立即学习“前端免费学习笔记（深入）”；
vue.js中这样写：
var com1 = Vue.extend({
template:'<h3>这是第一种方式</h3>'
});
Vue.component("myCom1",com1);注：myCom1是采用的驼峰命名方式，所以html中这样写：
<my-com1></my-com1>
注：如果不采用驼峰命名方式，js和html中这样写：
vue.js中这样写：
var com1 = Vue.extend({
template:'<h3>这是第一种方式</h3>'
});
Vue.component("mycom1",com1);html中写法：
<mycom1></mycom1>
上面可以不使用中间变量，即把com1的内容直接写在Vue.component(“mycom1”,com1)里面，如：
Vue.component("mycom1",Vue.extend({
template:'<h3>这是第一种方式</h3>'
}));第二种方式：不用extend
vue.js中这样写：
Vue.component("mycom1",{
template:'<div><h3>这是h3标签</h3><span>这是span标签</span></div>'
});注：不论是哪种方式创建出来的组件，必须只有一个根元素，即多个html元素的时候，要用一个div包裹
黑色全屏自适应的H5模板 HTML5的设计目的是为了在移动设备上支持多媒体。新的语法特征被引进以支持这一点，如video、audio和canvas 标记。HTML5还引进了新的功能，可以真正改变用户与文档的交互方式，包括： 新的解析规则增强了灵活性 淘汰过时的或冗余的属性 一个HTML5文档到另一个文档间的拖放功能 多用途互联网邮件扩展（MIME）和协议处理程序注册 在SQL数据库中存
56
html中依旧写成：
<mycom1></mycom1>
第三种：在页面上定义外部template元素
vue.js中这样写：
Vue.component("mycom1",{
template:'#temp'
});html中写template结构：
<template id="temp">
<h3>这是html中的temp</h3>
</template>PS：以上是全局注册，局部注册如下：
第一种局部注册：
js文件中写：
var vm = new Vue({
el:"#newBrand",
data:{},
components:{
mycom1:{
template: '<div><h3>这是局部template</h3></div>'
}
}
});html文件中写：
<div id="newBrand"> <mycom1></mycom1> </div>
第二种局部注册：
js文件中这样写：
var vm = new Vue({
el:"#newBrand",
data:{},
components:{
mycom1:{
template: '#temp'
}
}
});html文件中写法：
<template id="temp">
<div><h3>这是局部template啦</h3></div>
</template>相关免费学习推荐：JavaScript（视频）
以上就是vue.js中如何注册组件的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
345
收藏
