全局注册
核心是使用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>