vue 使用@hook:xxx的方式来监听第三方组件的生命周期函数

eg.

父组件内：

<template>
    <div class="container">
        <my-test @hook:mounted="mounted" :count="count" :max="max" @click="click"></my-test>
    </div>
</template>
<script>
//components 
import MyTest from '@/components/test/MyTest'
export default {
    components: {
        MyTest
    },
    data() {
        return {
            count: 0,
            max: 50
        }
    },
    methods: {
        click() {
            alert('click button');
        },
        mounted() {
            alert('vue componnet is mounted!');
        }
    }
}
</script>
<style lang="less" scoped>

</style>

这样就可以在子组件挂载时，执行父组件中给子组件绑定的 @hook:xxx=‘xxx’ 的方法。

@hook: xxx ---> xxx可以是 updated、created、mounted、beforeDestroy........等生命周期方法。

可以用此方法来监听第三方组件的声明周期钩子。

 

ps: 还可以用@hook:xx来监听组件本身的生命周期钩子，

eg. https://juejin.im/post/5eef7799f265da02cd3b82fe#comment

 

this.$once('hook:xxx', () => {.....});

this.$on('hook:xxx', () => {......});