vue中@hook使用技巧

比如父组件parent和子组件child，如果父组件想在子组件mounted之后作出相关操作，可以按照下面这种方式来写。

<!-- parent -->
<parent-component>
  <child-component @mounted="handleChildMounted"></child-component>
</parent-component>

// child
export default {
  mounted() {
    this.$emit('mounted')
  }
}

其实还有更简单的做法。

<!-- parent -->
<parent-component>
  <child-component @hook:mounted="handleChildMounted"></child-component>
</parent-component>

直接使用@hook就可以在父组件中监听子组件中钩子函数，不需要在子组件中额外地$emit一次。

同理，使用@hook还可以监听vue中其它的钩子函数，如@hook:created，@hook:destroyed等。