父組件向子組件通信
業(yè)務(wù)場景:現(xiàn)在我要在父組件點(diǎn)擊一個(gè)回退按鈕致份,這個(gè)回退會傳進(jìn)子組件中(子組件中有兩步進(jìn)程),子組件來處理亚皂。
解決方案
起初我是父組件通過props傳值吠式,但是發(fā)現(xiàn)只有組件第一次加載時(shí)才能傳值,通過事件改變的父組件值并不會再通過過props傳遞总寒,也就是說props只有加載組件時(shí)才會工作扶歪,并不會根據(jù)值改變動態(tài)操作
后面,我是通過操作dom的方法摄闸,this.$refs.children這樣直接操作子組件
<ProgressTwo ref="progressTwo" v-else-if="progress==2" @second="recordProgress"></ProgressTwo> //這是子組件
goSecond: function(){ //這是操作子組件的方法
this.$refs.progressTwo.second = true
this.second = false
}
注釋: 其實(shí)我們一直被父子組件概念束縛了善镰,子組件就是相當(dāng)于一個(gè)被包裹的div,只是那個(gè)div里有很多標(biāo)簽而已年枕,或者可以理解為我們在父組件里用iframe嵌套了一個(gè)頁面炫欺,這個(gè)頁面是子組件(這是幫助理解的粗話)
現(xiàn)在講講父子組件通信
父組件向子組件傳值
父組件
html
<div>
<NotFound v-else :searchThing="search"></NotFound> //search是父組件要傳的值
</div>
子組件
在script中拿值
props:{
searchThing: String //也可以給它一個(gè)默認(rèn)值 (defaultAddress: {Type: Object,default:()=> 'default'})
},
子組件向父組件傳值
通過發(fā)射函數(shù)
子組件
在script中通過函數(shù)告訴父組件
gotoPay: function(){
this.$emit('second',data) //data是你要向父組件傳的值(可傳可不傳看需求)
}
父組件
html
<ProgressTwo ref="progressTwo" v-else-if="progress==2" @second="recordProgress"></ProgressTwo>
script
父組件通過自定義的second事件監(jiān)聽子組件的發(fā)射
recordProgress: function(val){ //val用于接收子組件傳過來的值
if(val==true){
this.second = val
}else{
if(val==false){
this.progress = 3
}else{
this.progress = 1
}
}
},