組件關(guān)系可以分為父子組件通信桐款、兄弟組件通信咸这、跨級(jí)組件通信
自定義事件--子組件給父組件傳遞數(shù)據(jù)
子組件$emit()來觸發(fā)事件
父組件$on()來監(jiān)聽事件
步驟： 一、自定義事件
二魔眨、在子組件中用$emit觸發(fā)事件媳维，第一個(gè)參數(shù)是事件名，后邊的參數(shù)是要傳遞的數(shù)據(jù)
三冰沙、在自定義事件中用一個(gè)參數(shù)來接收
<div id="app">
父組件：{{num}}
<chang-com @change="total"></chang-com> <!-- 定義一個(gè)自定義事件 -->
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.component('chang-com',{
template: '<div>\
<button @click="addbtn">+100</button>\
<button @click="cutbtn">-100</button>\
子組件：{{count}}\
</div>\
',
data: function(){
return {
count :2000
}
},
methods: {
addbtn: function(){
this.count += 100
this.$emit('change',this.count)//點(diǎn)擊的時(shí)候同時(shí)觸發(fā)change事件
},
cutbtn: function(){
this.count -= 100
this.$emit('change',this.count)
}
}
})
var app = new Vue({
el: '#app',
data: {
num: 2000
},
methods:{
total: function(value){//這個(gè)value是傳遞過來的數(shù)據(jù)(this.count)
this.num = value //
}
}
})
</script>
在組件中使用v-model
v-model是一個(gè)語法糖侨艾，實(shí)際上做了兩個(gè)操作
- v-bind綁定一個(gè)value屬性
- v-on指令給當(dāng)前元素綁定input事件
當(dāng)觸發(fā)input的時(shí)候，input事件就會(huì)自動(dòng)接收傳遞過來的參數(shù)拓挥，并賦值給已經(jīng)綁定的值
demo
非父組件的通信
- 定義兩個(gè)組件
- 在根組件的data中創(chuàng)建bus中介
bus: new Vue() - 在A組件中綁定事件（后續(xù)需要觸發(fā)事件才能監(jiān)聽事件）唠梨，添加要傳遞的內(nèi)容
-- 觸發(fā)事件this.$root.bus.$emit('事件名',傳遞的數(shù)據(jù) ) - 在B組件中created狀態(tài)上監(jiān)聽事件
this.$root.bus.$on(事件名,function(value){})
demo
父鏈
this.$parent
子鏈
this.$children，子組件一般有很多侥啤，可以給每個(gè)子組件添加ref屬性,在父組件事件觸發(fā)時(shí)当叭，通過this.$refs.ref屬性名.子組件的內(nèi)容獲取子組件的內(nèi)容
