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