vue父組件觸發(fā)事件改變子組件的值的方法實例詳解
更新時間：2019年05月07日 14:32:20 作者：聽風語
這篇文章主要介紹了vue父組件觸發(fā)事件改變子組件的值的實例代碼，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下
父組件向子組件通信
業(yè)務(wù)場景：現(xiàn)在我要在父組件點擊一個回退按鈕，這個回退會傳進子組件中（子組件中有兩步進程），子組件來處理。
解決方案
起初我是父組件通過props傳值，但是發(fā)現(xiàn)只有組件第一次加載時才能傳值，通過事件改變的父組件值并不會再通過過props傳遞，也就是說props只有加載組件時才會工作，并不會根據(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
}
注釋：其實我們一直被父子組件概念束縛了，子組件就是相當于一個被包裹的div，只是那個div里有很多標簽而已，或者可以理解為我們在父組件里用iframe嵌套了一個頁面，這個頁面是子組件（這是幫助理解的粗話）
現(xiàn)在講講父子組件通信
父組件向子組件傳值
父組件
html
<div> <NotFound v-else :searchThing="search"></NotFound> //search是父組件要傳的值 </div>
子組件
在script中拿值
props:{
searchThing: String //也可以給它一個默認值 （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
}
}
},
總結(jié)
以上所述是小編給大家介紹的vue父組件觸發(fā)事件改變子組件的值的方法實例詳解，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復(fù)大家的！
相關(guān)文章
今天小編就為大家分享一篇vue動態(tài)禁用控件綁定disable的例子，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
這篇文章主要介紹了vue2項目中全局封裝axios問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
vue+mousemove實現(xiàn)鼠標拖動功能(拖動過快失效問題解決方法)
這篇文章主要介紹了vue+mousemove實現(xiàn)鼠標拖動功能，文中給大家介紹了鼠標移動過快拖動就失效問題的解決方法,需要的朋友可以參考下2018-08-08
vue實現(xiàn)跳轉(zhuǎn)接口push 轉(zhuǎn)場動畫示例
今天小編就為大家分享一篇vue實現(xiàn)跳轉(zhuǎn)接口push 轉(zhuǎn)場動畫示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要為大家詳細介紹了vue實現(xiàn)樓層跳轉(zhuǎn)效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
在vue項目中父子組件間的通訊很方便,但兄弟組件或多層嵌套組件間的通訊,就會比較麻煩,這時使用eventBus通訊,就可以很便捷的解決這個問題,這篇文章主要給大家介紹了關(guān)于Vue中事件總線(eventBus)使用的相關(guān)資料,需要的朋友可以參考下2022-03-03
vue里使用create,mounted調(diào)用方法的正確姿勢說明
這篇文章主要介紹了vue里使用create,mounted調(diào)用方法的正確姿勢，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要為大家詳細介紹了vue+echarts實現(xiàn)條紋柱狀橫向圖，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要為大家詳細介紹了vue3.x 使用jsplumb實現(xiàn)拖拽連線，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
Vue表單校驗validate和validateField的使用及區(qū)別詳解
validateField?和?validate?都可以用于表單驗證,但是它們的作用有所不同,下面這篇文章主要給大家介紹了關(guān)于Vue表單校驗validate和validateField的使用及區(qū)別的相關(guān)資料,需要的朋友可以參考下2024-04-04