vue公共組件傳值及時(shí)監(jiān)聽(tīng)到數(shù)據(jù)更新視圖

場(chǎng)景

AB兩個(gè)子組件在 父頁(yè)面中，（我們險(xiǎn)別估損信息為A，立案信息為B）

B組件的某個(gè)值是和A組件中一樣的且A組件值變化B即使監(jiān)聽(tīng)并渲染.例如：下圖總額A組件要把金額傳給  B組件的估損金額框，A金額變B也變

金額已經(jīng)綁定在A組件中

用兄弟傳值 把A組件的金額傳到B組件的估損金額

1.兄弟組件的語(yǔ)法是。先建一個(gè)bus.js文件

import Vue from 'vue'
export default new Vue()

2.在A組件中引入bus.JS

3.把本地的 金額 值傳給B組件，我這里是下拉框值變化的時(shí)候會(huì)觸發(fā)。

4.為了初始化頁(yè)面時(shí)就及時(shí)更新，在created在調(diào)用這個(gè)方法

5.B組件引入bus.js文件，并在頁(yè)面初始化時(shí)候接受A組件傳給的金額值。（我這里用本地的price值去接受傳過(guò)來(lái)的）

6.這時(shí)已經(jīng)接到A組件傳過(guò)來(lái)的值了，在監(jiān)聽(tīng)這個(gè)值如果有變化及時(shí)把最新的值賦給本地變量

vue組件傳值的幾種方式

父?jìng)髯?/h3>

當(dāng)子組件在父組件中當(dāng)做標(biāo)簽使用的時(shí)候，給子組件定義一個(gè)自定義屬性，值為想要傳遞的數(shù)據(jù)。

在子組件中通過(guò)props進(jìn)行接收，props是專(zhuān)門(mén)用來(lái)接收外邊的的數(shù)據(jù)的，有兩種接收方式，數(shù)組和對(duì)象，對(duì)象可以限制數(shù)據(jù)的類(lèi)型。

在這里簡(jiǎn)單介紹一下單項(xiàng)數(shù)據(jù)流的概念。

單向數(shù)據(jù)流：父組件向子組件傳遞數(shù)據(jù)的時(shí)候，子組件不允許更改父組件的數(shù)據(jù)，因?yàn)楦附M件會(huì)向多個(gè)子組件傳值，如果說(shuō)某個(gè)子組件對(duì)父組件的數(shù)據(jù)進(jìn)行修改的話，很有可能會(huì)導(dǎo)致其他的組件發(fā)生錯(cuò)誤，很難對(duì)數(shù)據(jù)的錯(cuò)誤進(jìn)行捕捉。

子傳父

當(dāng)子組件在父組件中當(dāng)做標(biāo)簽使用的時(shí)候，如果子組件需要給父組件傳遞數(shù)據(jù)的時(shí)候，需要在子組件中定義一個(gè)自定義的事件，事件名稱(chēng)不需要加()的

在子組件中通過(guò)this.$emit觸發(fā)自定義事件，將需要傳遞的參數(shù)通過(guò)emit的第二個(gè)參數(shù)進(jìn)行傳遞

非父子組件傳值

1.通過(guò)創(chuàng)建一個(gè)公共的Vue實(shí)例對(duì)象，this的指向是不同的，所以不能互相傳值，所以創(chuàng)建一個(gè)公共的實(shí)例，就可以傳值了，將實(shí)例對(duì)象綁定在Vue的原型身上即可。傳值的一方調(diào)用$emit，接收的一方調(diào)用$on，但是這種方法非常耗費(fèi)性能，我們可以將on,emit等棱出來(lái)掛載。

2.用第三方封裝好的eventbus

3自己封裝的$on,$emit,$off等方法。

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論