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

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

代码如下： 

<div id="app">
    <child-comp
      @child-event="handleChildEvent"
    ></child-comp>
</div>

 

Vue.component('child-comp', {
    template: "<div></div>",
    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 可以 ， 代码如下： 

 

<div id="app">
    <child-comp
      @hook:mounted="handleChildEvent"
    ></child-comp>
</div>

 

Vue.component('child-comp', {
    template: "<div></div>",
    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  等钩子函数