--------------------------------------全局组件--------------------------------------------------------
定义组件的第一种方式
<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:'我是标题密码'
}
},
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>'
});