vue注册组件跟注册局部组件

vue注册组件跟注册局部组件

由于以前都是用脚手架写的项目，因此常常忽略了这一点，由于最近入驻的公司是关于直播广告活动的，因此都是基于vue.js写出的项目，废话不多说直接开写吧

下面注册组件都是基于vue.js的

全局注册组件

第一种方法

var com1 = Vue.extend({
   template:'<h3>这是第一种方式</h3>'
}); //创建组件实例
Vue.component("myCom",com1);  //定义vue组件

简化版的写法

Vue.component("myCom",
Vue.extend({
   template:'<h3>这是第一种方式</h3>'
}));  //定义vue组件

HTML中的代码

//组件在这里是驼峰命名大写直接写-
<my-com>
	内容
</my-com>

第二种写法不使用extend

Vue.component("mycom",{
    template:'<div><h3>这是h3标签</h3><span>这是span标签</span></div>'
});

HTML写法不变

<mycom></mycom>

说实话上面两种用的少，本人认为js就该写逻辑代码（react除外，使用的jsx语法），特别像这种直接在html不使用路由的情况下，全部代码写在一个html中非常难维护，因此建议使用下面的写法

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

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

HTML写法

<template id="temp">
    <h3>这是html中的temp</h3>
</template>

PS：以上都是全局注册，局部注册如下：
第一种局部注册

var vm = new Vue({
    el:"#newBrand",
    data:{},
    components:{
        mycom1:{
            template: '<div><h3>这是局部template</h3></div>'
        }
    }
});

HTML

<div id="newBrand">
	<mycom1></mycom1>
</div>

第二种局部注册

var vm = new Vue({
    el:"#newBrand",
    data:{},
    components:{
        mycom1:{
            template: '#temp'
        }
    }
});

HTML

<template id="temp">
    <div><h3>这是局部template啦</h3></div>
</template>