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

場景

AB兩個子組件在 父頁面中，（我們險別估損信息為A，立案信息為B）

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

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

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

1.兄弟組件的語法是。先建一個bus.js文件

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

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

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

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

5.B組件引入bus.js文件，并在頁面初始化時候接受A組件傳給的金額值。（我這里用本地的price值去接受傳過來的）

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

vue組件傳值的幾種方式

父傳子

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

在子組件中通過props進行接收，props是專門用來接收外邊的的數(shù)據(jù)的，有兩種接收方式，數(shù)組和對象，對象可以限制數(shù)據(jù)的類型。

在這里簡單介紹一下單項數(shù)據(jù)流的概念。

單向數(shù)據(jù)流：父組件向子組件傳遞數(shù)據(jù)的時候，子組件不允許更改父組件的數(shù)據(jù)，因為父組件會向多個子組件傳值，如果說某個子組件對父組件的數(shù)據(jù)進行修改的話，很有可能會導致其他的組件發(fā)生錯誤，很難對數(shù)據(jù)的錯誤進行捕捉。

子傳父

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

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

非父子組件傳值

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

2.用第三方封裝好的eventbus

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

總結(jié)

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

最新評論