1.全局组件
方式一
var Com=Vue.extend({
//必须有一个根节点
template:'<div><h1>..</h1><p>xxx</p></div>'
})
//组件命名规范(不用驼峰命名)
Vue.component('hello',Com);
方式二
Vue.component('hello-world',{
template:'<div></div>'
})
2.局部组件
new Vue({
el:'#XX',
data:{
},
components:{
//方式一
'Com':{
template:'<div></div>'
},
//方式二
'Com1':{
template:"#Com1",
data:function(){
return{
title:"title"
}
}
}
}
})
<template id="Com1">
<div>
<p>{{title}}</P>
</div>
</template>
<body>
<hello></hello>
<hello-world></hello-world>
<Com></Com>
<Com1></Com1>
</body>