父元件向子元件傳值,子元件保持實時更新

2022-08-10 00:39:17 字數 971 閱讀 9125

最近用vue做乙個新專案,經歷了各種折磨,每次遇到問題都想大喊,格勞資上jquery,氮素肯定是不行的,今天遇到乙個小問題,vue父元件向子元件傳遞乙個動態的值,子元件只能獲取初始值,不能實時更新?

這就有點折磨人了,設想的是,父元件發生變化獲取資料,動態傳遞給子元件,子元件實時重新整理檢視。vue檢視是資料驅動的嘛,這設想就是完美而合理的了吧。可就是不行!!!!

請教前輩,支個招讓用vuex,可就是個小功能能,有點殺雞用牛刀啊,又去查了查文件,找了找資料。原來需要在子元件watch(監聽)父元件資料的變化。

我就這樣使用watch:

data() 

},watch:

}

咦?又出么蛾子了,完全監聽不到嘛!!!

繼續查文件,好嘛,原來這種方式只能watch基礎型別的變數,我傳遞的是個object啊,**,真的處處是坑。。。

為了防止將來繼續掉坑,做個總結吧

1、普通watch   

如上所示,用過vue的都應該挺熟悉的

2、陣列的watch

data() 

},watch: }},

deep:

true

}}

3、物件的watch

data()    

}},watch: ,

deep:

true

}}

tips: 只要bet中的屬性發生變化(可被監測到的),便會執行handler函式;

如果想監測具體的屬性變化,如pokerhistory變化時,才執行handler函式,則可以利用計算屬性computed做中間層。

案例如下:

4、物件的具體屬性watch(活用computed)

data()    

}},computed:

},watch:

}

文章**於:

子元件向父元件傳值

子向父傳值 子元件像父元件傳值的本質就是,父向子傳遞方法,子呼叫這個方法,同時把 資料當作引數 傳遞給這個方法 父元件 goodsinfo.vue 子元件 goodsinfo numbox.vue 1.goodsinfo.vue 操作 1.匯入子元件 import numbox from compo...

vue子元件向父元件傳值。

1 子,父元件相互傳值。話不多說直接上 父元件向子元件傳值就是通過子元件定義的props 子元件 父元件 import modal from components common modal modal.vue import timecontrol from components common tim...

Vue父元件向子元件傳值

元件例項定義方式,注意 一定要使用props屬性來定義父元件傳遞過來的資料 建立 vue 例項,得到 viewmodel var vm newvue components script 使用v bind或簡化指令,將資料傳遞到子元件中 msg son div 原理 父元件將方法的引用,傳遞到子元件內...