VUE学习之父组件监听子组件生命周期钩子函数

2024-02-06 02:07| 来源: 网络整理| 查看: 265

父组件监听子组件生命周期钩子函数，这个应该很好做，在父组件中v-on 在子组件中$emit 就可以了。就是子组件向父组件通信问题。

代码如下：

Vue.component('child-comp', { template: "", data: function () { return { childMsg: 'Hello, I am Child' } }, methods: { }, mounted () { this.$emit("child-event"); } }); const app = new Vue({ el: '#app', data: function () { return { parentData : "parent Message" } }, beforeCreate: function(){ console.log("before created"); }, methods: { handleChildEvent(){ console.log("child mounted"); } } });

我们看到在子组件中的mounted钩子函数中调用this.$emit("child-event"); 向父组件发送child-event消息。父组件@child-event="handleChildEvent" 监听了此消息

假如我们这里的子组件是外部的，是不可更改的。那我们父组件监听这个外部子组件中的生命周期钩子函数怎么办呢?

@hook：mounted 可以，代码如下：

Vue.component('child-comp', { template: "", data: function () { return { childMsg: 'Hello, I am Child' } }, methods: { }, mounted () { //this.$emit("child-event"); } }); const app = new Vue({ el: '#app', data: function () { return { parentData : "parent Message" } }, beforeCreate: function(){ console.log("before created"); }, methods: { handleChildEvent(){ console.log("child mounted"); } } });

我们把子组件中的mounted钩子函数中的$emit方法去掉了，但在父组件中我们做了@hook:mounted

都可以得到打印child mounted

从@hook:mounted 我们可以看出还可以用@hook：created 等钩子函数

【本文地址】

公司简介

联系我们

今日新闻

推荐新闻

专题文章