這篇文章主要介紹了vue父組件觸發事件改變子組件的值的實例代碼,非常不錯,具有一定的參考借鑑價值,需要的朋友可以參考下
父組件向子組件通信
業務場景:現在我要在父組件點擊一個回退按鈕,這個回退會傳進子組件中(子組件中有兩步進程),子組件來處理。
解決方案
起初我是父組件通過props傳值,但是發現只有組件第一次加載時才能傳值,通過事件改變的父組件值並不會再通過過props傳遞,也就是說props只有加載組件時纔會工作,並不會根據值改變動態操作
後面,我是通過操作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 }
註釋:其實我們一直被父子組件概念束縛了,子組件就是相當於一個被包裹的div,只是那個div裏有很多標籤而已,或者可以理解爲我們在父組件裏用iframe嵌套了一個頁面,這個頁面是子組件(這是幫助理解的粗話)
現在講講父子組件通信
父組件向子組件傳值
父組件
html
<div> <NotFound v-else :searchThing="search"></NotFound> //search是父組件要傳的值 </div>
子組件
在script中拿值
props:{ searchThing: String //也可以給它一個默認值 (defaultAddress: {Type: Object,default:()=> 'default'}) },
子組件向父組件傳值
通過發射函數
子組件
在script中通過函數告訴父組件
gotoPay: function(){ this.$emit('second',data) //data是你要向父組件傳的值(可傳可不傳看需求) }
父組件
html
<ProgressTwo ref="progressTwo" v-else-if="progress==2" @second="recordProgress"></ProgressTwo>
script
父組件通過自定義的second事件監聽子組件的發射
recordProgress: function(val){ //val用於接收子組件傳過來的值 if(val==true){ this.second = val }else{ if(val==false){ this.progress = 3 }else{ this.progress = 1 } } },
總結
以上所述是小編給大家介紹的vue父組件觸發事件改變子組件的值的方法實例詳解,希望對大家有所幫助,如果大家有任何疑問歡迎給我留言,小編會及時回覆大家的!