鍍金池/ 問答/HTML/ vue組件傳值問題

vue組件傳值問題

子組件A通過點擊按鈕事件傳值給父組件,然后再把值從父組件傳給子組件B,請問為什么只有第一次點擊按鈕的時候子組件B收到值了,以后多次點擊按鈕事件都不管用了。刷新的話還是只有第一次可以接收到值。
代碼如下:

子組件A按鈕點擊傳值事件:

goIndex(){
this.$emit('gogo','a');
}

父組件接收代碼:
HTML:
<componentsA @gogo = "button" >子組件A</componentsA>
<componentsB :child-tab = "isAddedTab" >子組件B</componentsB>
JS:
export default {

data () {
    return {
        isAddedTab:''
    }
},
components: {
    moneyDetails,
    settings
},
methods: {
   button(e){
        console.log(e);
        this.isAddedTab = e;
   }, 
}

}

子組件B接收值:

props: ['childTab'],
watch: {

childTab(v){
 console.log(v);//這個v只有第一次點擊子組件A按鈕可以打印出來,再次點擊按鈕就打印不出來了
 }

},

回答
編輯回答
尛憇藌

你$emit('gogo','a') 是個固定值a, vue是響應式的,如果isAddedTab值沒變,不會再傳值給B組件

相當于B組件一開始獲得父組件傳過來的isAddedTab值是空,因為父組件默認值是空,然后A組件按鈕點擊,事件回調給父組件,改變isAddedTab值為a,這時候因為isAddedTab改變所以傳遞給子組件B,B里面watch得到值a,然后你A組件按鈕二次點擊,事件會觸發(fā),但是因為isAddedTab值本來就是a,賦值再次賦為a,不會重復傳遞值給B組件,因為值根本沒有發(fā)生變化,vue在這邊是做過優(yōu)化的,不會重復傳遞相同值

你如果需要A組件每次點擊,B組件都要觸發(fā)某些操作,那就A組件事件觸發(fā)給父組件,父組件直接調用子組件B的某個方法就行,不用prop傳值
如果是A組件點擊返回一個值給B組件,你現在這么寫沒問題,當值變化的時候B組件才會獲得通知,這個沒問題,只是你demo里面每次傳的值都一樣,所以只打印1次

2017年4月10日 04:20