vue組件學(xué)習(xí)教程
更新時(shí)間：2017年09月09日 13:40:35 作者：lychiyu
這篇文章主要為大家詳細(xì)介紹了vue組件學(xué)習(xí)教程，根據(jù)Vue官方文檔學(xué)習(xí)的筆記，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
在學(xué)習(xí)vue時(shí)，組件學(xué)習(xí)比較吃力，尤其是組件間的通信，所以總結(jié)一下，官方文檔的組件部分。
注冊(cè)組件
全局組件
語法如下，組件模板需要使用一個(gè)根標(biāo)簽包裹起來。data必須是一個(gè)方法
Vue.component('component-name',{
template:'<div><h1>標(biāo)題</h1><span>作者信息</span></div>',
data(){
return{
message:'組件的屬性'
}
},
methods:{
}
})
局部組件
var com = {
template:'<div><h1>標(biāo)題</h1><span>作者信息</span></div>',
data(){
return{
message:'組件的屬性'
}
},
methods:{
}
}
new Vue({
components:{
'compontent-name':com
}
})
組件通信
prop將父組件數(shù)據(jù)傳給子組件
<div id='app'> <child :msg=message></child> </div>
<script>
Vue.component('child', {
props: ['msg'],
template: '<p>{{msg}}</p>'
})
new Vue({
el: '#app',
data: {
message: '父組件數(shù)據(jù)'
}
})
</script>
利用子組件的props選項(xiàng)，父組件可以向子組件傳遞數(shù)據(jù)，但是子組件不能求改父組件的數(shù)據(jù)。
非父子組件通信
需要使用一個(gè)空的Vue實(shí)例來管理
<div id='app'> <com-a></com-a> <com-b></com-b> </div>
var bus = new Vue();
var coma = {
template: '<p @click="send">{{adata}}</p>',
data(){
return {
adata: 'a的數(shù)據(jù)'
}
},
methods:{
send(){
// 觸發(fā)這一事件
bus.$emit('data-to-b', this.adata);
}
}
};
var comb= {
template: '<p>{{bdata}}</p>',
data(){
return {
bdata: 'b的數(shù)據(jù)'
}
},
mounted(){
// 監(jiān)聽事件，獲取a組件的數(shù)據(jù)，進(jìn)行相關(guān)操作
bus.$on('data-to-b', function (msg) {
this.bdata = msg;
}.bind(this));
}
};
new Vue({
el:'#app',
components: {
'com-a': coma,
'com-b': comb
}
})
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue2?中的數(shù)據(jù)劫持簡(jiǎn)寫示例
這篇文章主要為大家介紹了Vue2?中的數(shù)據(jù)劫持簡(jiǎn)寫示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
這篇文章通過實(shí)例代碼給大家介紹了vue-父子組件傳值和ref獲取dom和組件的方法，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-11-11
這篇文章主要介紹了bing Map 在vue項(xiàng)目中的使用,需要的朋友可以參考下2018-04-04
Vue?運(yùn)行高德地圖官方樣例,設(shè)置class無效的解決
這篇文章主要介紹了Vue?運(yùn)行高德地圖官方樣例,設(shè)置class無效的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
詳解基于vue-cli3.0如何構(gòu)建功能完善的前端架子
這篇文章主要介紹了詳解基于vue-cli3.0如何構(gòu)建功能完善的前端架子，本文整合出具備基礎(chǔ)功能的前端架子，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-10-10
在Vue.js的開發(fā)過程中,組件方法的定義和調(diào)用是非常常見的,有時(shí)候,為了響應(yīng)事件或其他操作,我們需要在組件的方法中使用匿名函數(shù),本文將深入探討如何在Vue組件的方法中加載和使用匿名函數(shù),并提供詳細(xì)的代碼示例和解釋,幫助開發(fā)者更好地理解和應(yīng)用這些技術(shù)2024-09-09
Vue開發(fā)過程中遇到的疑惑知識(shí)點(diǎn)總結(jié)
vue是法語中視圖的意思，Vue.js是一個(gè)輕巧、高性能、可組件化的MVVM庫，同時(shí)擁有非常容易上手的API。下面這篇文章主要給大家總結(jié)了Vue在開發(fā)過程中遇到的疑惑知識(shí)點(diǎn),有需要的朋友可以參考借鑒，下面來一起看看吧。2017-01-01
vue實(shí)現(xiàn)導(dǎo)出excel的多種方式總結(jié)
在Vue中實(shí)現(xiàn)導(dǎo)出Excel有多種方式,可以通過前端實(shí)現(xiàn),也可以通過前后端配合實(shí)現(xiàn),這篇文章將為大家詳細(xì)介紹幾種常用的實(shí)現(xiàn)方式,需要的可以參考下2023-08-08
Vue3+echarts5踩坑以及resize方法報(bào)錯(cuò)的解決
這篇文章主要介紹了Vue3+echarts5踩坑以及resize方法報(bào)錯(cuò)的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
vue項(xiàng)目純前端實(shí)現(xiàn)的模板打印功能示例代碼
在Vue項(xiàng)目中,通過使用vue-print-nb插件,可以實(shí)現(xiàn)頁面的打印功能,這篇文章主要介紹了vue項(xiàng)目純前端實(shí)現(xiàn)的模板打印功能的相關(guān)資料,需要的朋友可以參考下2024-10-10