vue中@hook使用技巧

该文章由 leevare 发布于 ,归类于 Javascript

比如父组件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等。

如果觉得我的文章对您有用,请您随意打赏。您的支持将鼓励我更加努力创作!

相关文章:

说点什么

avatar
300
  Subscribe  
提醒