vue組件---組件就是一個大對象
組件 (Component) 是 Vue.js 最強大的功能之一遥椿。
組件可以擴展 HTML 元素瑞佩,封裝可重用的代碼楣责。
在較高層面上顷蟆,組件是自定義元素,Vue.js 的編譯器為它添加特殊功能腐魂。
在有些情況下,組件也可以是原生 HTML 元素的形式逐纬,以 is 特性擴展蛔屹。
一、定義一個組件:
在html中使用<my-aaa></my-aaa>
自定義標簽名:小寫豁生,并且包含一個短杠兔毒,實測大寫不支持,,,但是可以在寫HTML結構時用大寫
1. 全局組件--要注冊一個全局組件,使用 Vue.component(tagName, options)
(1)定義全局組件比較常用的方式
Vue.component('my-aaa',{
template:'<strong>好</strong>'甸箱,
data:function(){ //組件里面放數(shù)據(jù):data必須是函數(shù)的形式育叁,函數(shù)必須返回一個對象(json)
return {
msg:"123456789"
};
},
methods:{ //組件里其他的用法,和vue實例一樣
}
});
(2) 定義全局組件另一種方式
var Aaa=Vue.extend({
template:'<h3>我是標題3</h3>',
data:function(){ //*組件里面放數(shù)據(jù):data必須是函數(shù)的形式芍殖,函數(shù)必須返回一個對象(json)
return {
msg:"123456789"
};
},
methods:{ //*組件里其他的用法豪嗽,和vue實例一樣
}
});
Vue.component('aaa',Aaa);
2. 局部組件---放到某個組件內部
(1) 定義局部組件比較常用的方式
var vm=new Vue({//組件內部用法同全局組件
el:'#box',
components:{
'my-aaa':{
template:'<h2>標題2</h2>'
}
}
});
(2) 定義局部組件另一種方式
var Aaa=Vue.extend({
template:'<h3>我是標題3</h3>',
data:function(){ //*組件里面放數(shù)據(jù):data必須是函數(shù)的形式,函數(shù)必須返回一個對象(json)
return {
msg:"123456789"
};
},
methods:{ //*組件里其他的用法豌骏,和vue實例一樣
}
});
var vm=new Vue({
el:'#box',
data:{
bSign:true
},
components:{ //局部組件
aaa:Aaa
}
});