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等。

如果您觉得本文对您有用,欢迎捐赠或留言~
微信支付
支付宝

发表评论

您的电子邮箱地址不会被公开。