vue 定义组件

--------------------------------------全局组件--------------------------------------------------------

定义组件的第一种方式

<div id="box">
<aaa></aaa>   //aaa就是组件

</div>

var Aaa=Vue.extend({
template:'<h3>我是标题</h3>'   

});

var bbb=Vue.component('aaa',Aaa);  //全局注册组件

--------------------------------------组件中放数据--------------------------------------------------------

<div id="box">
<aaa></aaa>
</div>

var Aaa=Vue.extend({
data(){     //data要是函数形式，返回时候必须是一个对象形式
return{
msg:'我是标题密码'
}
},
template:'<h3>{{msg}}</h3>'
});

var bbb=Vue.component('aaa',Aaa);
var vm=new Vue({
el:'#box'
})

--------------------------------------局部组件--------------------------------------------------------

var Aaa=Vue.extend({
data(){
return{
msg:'我是标题密码'
}
},
4000

template:'<h3>{{msg}}</h3>'
});

var vm=new Vue({
el:'#box',
components:{   //全局组件和局部组件不同之处在于注册组件在什么地方注册
aaa:Aaa
}
})

--------------------------------------第二种创建组件方式--------------------------------------------------------

<div id="box">
<my-aaa></my-aaa>
</div>

Vue.component('my-aaa',{
template:'<strong>好</strong>'
});