vue组件注册的几种方式

全局注册

核心是使用Vue.component

1. 结合vue.extend

vue.extend({//包含组件选项的对象})，使用基础构造器创建 组件“子类”

var com1 = Vue.extend({
	template:'<h3>结合vue.extend创建组件</h3>'
})
Vue.component("myCom1",com1) //全局注册组件

//组件的使用
<my-com1></my-com1>

2. 直接使用模板创建组件

Vue.component("myCom1",{
	template:'<h3>不使用vue.extend，直接使用模板也可以</h3>'
})

//组件的使用
<my-com1></my-com1>

或者,在页面上定义外部template元素

Vue.component("mycom1",{
	template:'#temp'   // 是不是有点像 el:'#app' 这里el是dom template是模板
})
//这种情况下，还需要在html这么写：
<template id="temp">
	<h3/> 直接使用模板的另一种方式</h3>	
</template>

局部注册

核心是在父组件内部使用components:{}

var vm = new Vue({
	el: "#app",
	data:{},
	components:{
		mycom2:{
			template: '<h3>组件的局部注册</h3>'
		}
	}
})

//使用
在app组件中
<div id="app">
<mycom2></mycom2>
</app>

也可同上，在页面中这么定义

var vm = new Vue({
	el: "#app",
	data:{},
	components:{
		mycom2:{
			template: '#temp'
		}
	}
})

//在html中还需这么写
<template id="temp">
	<div><h3>组件的局部注册</h3></div>
</template>