监听第三方组件的生命周期钩子

[ly2011]

在一些场景中，我需要在父组件上知道子组件什么时候被创建、挂载或者是更新，特别是当为原生 js 库创建组件时。

你可能知道有一些方法可以在你自己的组件上，实现以上的需求。举个例子，通过在子组件的生命周期的钩子函数中，触发事件，就像这样：

mounted() {
  this.$emit("mounted");
}
复制代码

然后你就可以在父组件上这样做：<Child @mounted="doSomething"/>。

我告诉你，没有必要这样实现；更何况实际上，你在面对第三方组件时，也办法这样实现。

取而代之的方法是，通过使用 @hook: 前缀监听生命周期中的钩子，并指定回调函数。

举个例子，如果你想要在第三方组件 v-runtime-template 渲染时做一些事情，那么你可以监听它的生命周期中的 updated 钩子：

<v-runtime-template @hook:updated="doSomething" :template="template" />
复制代码

不相信我吗？自己去 CodeSandbox 看看这个 例子 吧！

demo:

// parent.vue
<template>
  <div id="app">Hi fly! Check out the console and the code around!
    <Child @hook:mounted="childMounted" @hook:beforeCreate="childBeforeCreate"/>
  </div>
</template>

<script>
import Child from "./Child";

export default {
  name: "app",
  components: { Child },
  methods: {
    childMounted() {
      console.log("Child was mounted");
    },
    childBeforeCreate() {
      console.log("Child is beforeCreate");
    }
  }
};
</script>

// child.vue
<template>
  <h3></h3>
</template>

<script>
export default {
  data() {
    return {
      loading: false
    };
  },
  mounted() {
    console.log("我被挂载了");
    this.update();
  },
  methods: {
    update() {
      this.$nextTick(() => {
        this.loading = false;
      });
    }
  }
};
</script>