Hi Vue 开发者! 您可能已经在 Vue 中使用了 lifecycle hooks,以便在创建、安装或破坏组件时执行不同的操作。
但是......你知道Vue的生命周期挂钩发出自己的定制事件吗?是的,这是Damian Dulisz(https://twitter.com/DamianDulisz)用 这条推文显示的,这是启发的。
你可能在想...为什么我应该关心,亚历克斯?好吧,在某些情况下可以有用的技巧是很好的。
聆听儿童胡克
Vue 的生命周期链接会发出自定义事件,其名称为链接本身,前缀为 hook:. 例如,安装链接会发出一个 `hook:mounted’ 事件。
因此,您可以从家长组件中聆听儿童的收音机,就像您在任何自定义事件中一样:
1<template>
2 <Child @hook:mounted="childMounted"/>
3</template>
4
5<script>
6import Child from "./Child";
7
8export default {
9 components: { Child },
10 methods: {
11 childMounted() {
12 console.log("Child was mounted");
13 }
14 }
15};
16</script>
例如,如果您想在 v-runtime-template完成模板渲染时执行操作,您可以使用 @hook:updated 事件:
1<template>
2 <v-runtime-template @hook:updated="doSomething" :template="template"/>
3</template>
看起来像魔法,哈哈?你可能已经遇到过这些案例,你在孩子身上创建了一根绳子,只是让父母知道绳子被叫了。
动态登记Hooks
虽然不常见,但可能有一些时候你需要动态注册一个链接,就像你可以动态创建自定义事件一样。
采取以下例子,从Damian的推文中(https://twitter.com/DamianDulisz/status/981549658571968512),动态地创建一个BeforeDestroy链接,因为它正在为Pickaday(https://github.com/dbushell/Pikaday)创建一个包装视图组件:一个简单的JavaScript日期选择库。
由于插件必须创建在安装的钩子上,并且它不会将实例保存在反应状态变量中,唯一的方法是通过在创建Pickaday实例后注册beforeDestroyed钩子:
1export default {
2 mounted() {
3 const picker = new Pickaday({
4 // ...
5 });
6
7 this.$once("hook:beforeDestroy", () => {
8 picker.destroy();
9 })
10 }
11};
包装上
你已经看到使用hook:事件来响应hook呼叫的技巧,而无需手动发出任何事件。
您可以看到本文的代码和演示文稿在 This Codesandbox中。