vue中父元件如何監聽子元件值的變化

2022-05-18 08:51:18 字數 1267 閱讀 1904

vue中我們會遇到很多父子元件通訊的需求,

下面簡單列一下,父子元件通訊的幾種情況

1:父元件向子元件傳值:使用prop向子元件傳值;

2:子元件實時監聽父元件傳來的值的變化:使用watch去監聽父元件傳來的值;

3:父元件可以通過this.$refs.name.去訪問子元件的值或方法;

4:子元件可以通過this.$parent.去訪問父元件的值或方法;

總結了一下,感覺好像挺全面的,好像不缺啥了。。。。

但是仔細一想,父元件如何去監聽子元件的值呢?如何根據子元件中的某個值的變化,父元件作出響應呢????

研究了一下,需要借用vuex!!!!超級大無敵的vuex

上個例子:

先看子元件

<

template

>

<

div>

<

el-button

@click

="dd()"

>自定義元件內的按鈕

el-button

>

div>

template

>

<

script

>

import from

'vuex';

export

default

, immediate:

true

, }

},data()

},props:[

'propobj'],

//外部傳值

methods:

else}}

}script

>

子元件中,點選按鈕,會改變text的值,

我們用watch去監聽,text值的變化,它如果變化了,就呼叫vuex中的actions方法,就是把vuex中的乙個變數設定成text的值。

再來看看父元件中,只看computed即可:

<

script

>

import from

'vuex';

import lala from

'@/components/lala.vue';

export

default,

}script

>

父元件中,將vuex中的乙個getter值作為計算屬性,這不是就完美的監聽了子元件值的變化了嘛!!!有了以上的幾種方法,感覺可以在元件之間任意穿梭了

Vue 父元件如何監聽子元件的生命週期

這裡以 mounted 為例,在父元件 parent 和子元件 child 中,如果父元件監聽到子元件掛載 mounted 就做一些邏輯處理,可以通過以下寫法實現 parent.vue child.vue mounted 以上方法雖然可行,但每次都需要手動寫一次 emit 觸發父元件的事件 更簡單的...

VUE父元件監聽子元件的生命週期

比如有父元件 parent 和子元件 child,如果父元件監聽到子元件掛載 mounted 就做一些邏輯處理,可以通過以下寫法實現 parent.vue dosomething child.vue mounted 這屬於手動通過 emit觸發父元件的事件,實現監聽生命週期的作用。簡單的方式可以在父...

父元件監聽子元件資料 Vue元件單向資料流

如果元件 中 data 裡的資料是固定的,那麼頁面上顯示的時候內容就是一樣的,而實際開發中,復用的元件裡顯示的內容往往是不同的,這就需要從父元件中傳遞不同的內容給子元件。一 prop的使用方法 上面 中,父元件以 article的形式傳值給子元件。子元件中用prop接收父元件傳的值 二 單向資料流 ...