Vue.js: ganchos de ciclo de vida de sus componentes y los de terceros

Los ganchos de ciclo de vida son una parte muy importante de cualquier componente. Nosotros, nuestra aplicación, a menudo necesitamos saber qué sucede con un componente cuando se crea, monta, actualiza o destruye.

En el componente, podemos capturar estos eventos utilizando métodos apropiados, por ejemplo:

• created - se crea la instancia del componente
• montado : la instancia del componente está montada
• actualizado : el DOM virtual se ha actualizado debido a cambios en los datos
• destruido : la instancia del componente se destruye
• etc. La documentación

En el código de nuestro componente, se verá así:

// MyComponent.vue <template> <h1>Hello, {{ who }}</h1> </template> <script> export default { name: 'MyComponent', data() { return { who: 'world' } }, mounted() { //  -      } } </script> 

Bueno Pero, ¿qué sucede si el componente primario necesita saber qué está sucediendo en el componente secundario, por ejemplo, que el componente se ha actualizado? En el componente secundario, podemos generar un evento y colgar un oyente en el componente primario. En el código de nuestra aplicación, se verá así:

 //   ChildComponent.vue <template> <div> <div>Count: {{ counter }}</div> <button @click="add">+1</button> </div> </template> <script> export default { name: 'ChildComponent', data() { return { counter: 0 } }, updated() { this.$emit('updated') }, methods: { add() { this.counter++ } } } </script> 

 //   ParentComponent.vue <template> <div> <ChildComponent @updated="usefulMethod"/> </div> </template> <script> import ChildComponent from 'ChildComponent.vue' export default { name: 'ParentComponent', components: { ChildComponent }, data() { return {} }, methods: { usefulMethod() { //  -        } } } </script> 

Genial, al actualizar el componente secundario, el componente primario detecta el evento actualizado y se ejecuta el método útilMethod ().

¡Todo es genial! Pero, ¿qué sucede si necesitamos incrustar un componente de terceros descargado de npm o git y hacer algo útil en el componente principal, por ejemplo, al montarlo? Ingrese al código de un componente de terceros, en un gancho montado para generar un evento ... ¡No es una buena idea! ¡Pero qué pasa si te digo que no tienes que hacerlo! En cambio, ¡solo podemos escuchar el evento! El nombre de este evento será el nombre del @hook: del ciclo de vida, pero se debe @hook: prefijo @hook: algo como esto @hook:___ , por ejemplo: @hook:mounted, @hook:updated @hook:destroyed .

En el código, se verá más o menos así:

 //   ParentComponent.vue <template> <div> <ThirdPartyComponent @hook:mounted="usefulMethod"/> </div> </template> <script> import ThirdPartyComponent from 'vue-third-party-component' //   export default { name: 'ParentComponent', components: { ThirdPartyComponent }, data() { return {} }, methods: { usefulMethod() { //  -    mounted     } } } </script> 

Me parece que esta es una funcionalidad muy útil para trabajar con componentes propios y de terceros. Espero que lo encuentres útil. Es un poco extraño que no haya una palabra en la documentación al respecto y algunas características solo se pueden encontrar leyendo el código fuente.

Gracias por leer Lea el muelle y la fuente! ¡Y con el próximo año nuevo 2020!