VUE學習之父元件監聽子元件生命週期鉤子函式

2021-09-23 20:19:10 字數 898 閱讀 8769

父元件監聽子元件生命週期鉤子函式,這個應該很好做,在父元件中v-on 在子元件中$emit 就可以了。 就是子元件向父元件通訊問題。

**如下: 

@child-event="handlechildevent"

>

vue.component('child-comp', 

},methods: ,

mounted ()

}); data: function ()

},beforecreate: function(),

methods:

}});

我們看到在子元件中的mounted鉤子函式中呼叫this.$emit("child-event"); 向父元件傳送child-event訊息。 父元件@child-event="handlechildevent" 監聽了此訊息

假如我們這裡的子元件是外部的,是不可更改的。那我們父元件監聽這個外部子元件中的生命週期鉤子函式怎麼辦呢? 

@hook:mounted 可以 , **如下: 

@hook:mounted="handlechildevent"

>

vue.component('child-comp', 

},methods: ,

mounted ()

}); data: function ()

},beforecreate: function(),

methods:

}});

我們把子元件中的mounted鉤子函式中的$emit方法去掉了, 但在父元件中我們做了@hook:mounted  

都可以得到列印child mounted  

從@hook:mounted 我們可以看出還可以用@hook:created  等鉤子函式

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

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

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

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

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

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