vue.js中如何注册组件-木庄网络博客

本文摘自PHP中文网，作者coldplay.xixi，侵删。

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中这样写：

1	`<my-com1></my-com1>`

注：如果不采用驼峰命名方式，js和html中这样写：

vue.js中这样写：

var com1 = Vue.extend({
    template:'<h3>这是第一种方式</h3>'
});
Vue.component("mycom1",com1);

html中写法：

1	`<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包裹

html中依旧写成：

1	`<mycom1></mycom1>`

第三种：在页面上定义外部template元素

vue.js中这样写：

Vue.component("mycom1",{
    template:'#temp'
});

html中写template结构：

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

￥83.86元 人民邮电出版社

本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者