vue.js中如何注册组件

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

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中如何注册组件的详细内容，更多内容请关注技术你好其它相关文章！