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

2021-10-14 18:13:02 字數 1077 閱讀 2245

如果元件 中 data 裡的資料是固定的,那麼頁面上顯示的時候內容就是一樣的,而實際開發中,復用的元件裡顯示的內容往往是不同的,這就需要從父元件中傳遞不同的內容給子元件。

一、prop的使用方法

上面**中,父元件以:article的形式傳值給子元件。

子元件中用prop接收父元件傳的值:

}}}

}

二、單向資料流

單向資料流指的是父子 prop 之間形成了乙個單向下行繫結:父級 prop 的更新會向下流動到子元件中,但是反過來則不行。這樣可以防止從子元件意外改變父級元件的狀態,從而導致你的應用的資料流向難以理解。

簡單來說:

1、prop 可以實現父到子的資料傳遞;

2、父元件中的資料變化,會通過 prop 傳遞到子元件;

3、子元件不能直接修改父元件通過 prop 傳遞過來的資料;

但實際開發中常會遇到傳到子元件中的資料需要處理後才能使用的情況,比如排序、格式化等,這時候怎麼辦呢?

三、prop傳入資料的處理

1. prop 傳入的資料需要處理

在上面第二段**中,用計算屬性來對傳入的資料進行處理

2. prop 傳入的資料作為本地資料使用

如果想將 prop 傳遞的初始值作為乙個本地資料使用,可以定義乙個本地的 data 屬性並將這個 prop 用作其初始值:

props: ['initialtitle'],data: function () }

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

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

vue子元件實時監聽父元件資料(watch監聽)

files已上傳的檔案 props files data watch 利用watch監聽父元件傳過來的某個資料變化,結果監聽不到,搜尋半天,嘗試半天,發現這種方式只能監聽基礎型別的變數而這傳遞的是個陣列。所以查了下還是做個總結吧。注意 不能在 computed 中改變頁面變數的值,如果需要改變,請使...

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

vue中我們會遇到很多父子元件通訊的需求,下面簡單列一下,父子元件通訊的幾種情況 1 父元件向子元件傳值 使用prop向子元件傳值 2 子元件實時監聽父元件傳來的值的變化 使用watch去監聽父元件傳來的值 3 父元件可以通過this.refs.name.去訪問子元件的值或方法 4 子元件可以通過t...