比如父组件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
等。
如果觉得我的文章对您有用,请您随意打赏。您的支持将鼓励我更加努力创作!
如无特殊声明,文章均为原创,若有不正之处,万望告知。转载请附上原文地址,十分感谢!