En los documentos de VueJs 2.0 no puedo encontrar ningún gancho que escuche los cambios de props .
¿VueJs tiene ganchos como onPropsUpdated() o similar?
Actualizar
Como sugirió @wostex, traté de watch mi propiedad pero nada cambió. Entonces me di cuenta de que tengo un caso especial:
<template> <child :my-prop="myProp"></child> </template> <script> export default { props: ['myProp'] } </script> Estoy pasando myProp que el componente principal recibe al componente child . Entonces el watch: {myProp: ...} no funciona.
Puede watch accesorios para ejecutar algún código sobre los cambios de accesorios:
new Vue({ el: '#app', data: { text: 'Hello' }, components: { 'child' : { template: `<p>{{ myprop }}</p>`, props: ['myprop'], watch: { myprop: function(newVal, oldVal) { // watch it console.log('Prop changed: ', newVal, ' | was: ', oldVal) } } } } }); <script src="https://unpkg.com/vue/dist/vue.js"></script> <div id="app"> <child :myprop="text"></child> <button @click="text = 'Another text'">Change text</button> </div>¿Has probado esto?
watch: { myProp: { // the callback will be called immediately after the start of the observation immediate: true, handler (val, oldVal) { // do your stuff } } }En mi caso, necesitaba una solución en la que cada vez que cambiaran los accesorios, necesitaba analizar mis datos nuevamente. Estaba cansado de hacer un observador separado para todos mis accesorios, así que usé esto:
watch: { $props: { handler() { this.parseData(); }, deep: true, immediate: true, }, }, El punto clave para sacar de este ejemplo es usar deep: true para que no solo vea $props sino también sus valores anidados como, por ejemplo props.myProp
Puede obtener más información sobre las opciones de este reloj ampliado aquí: https://vuejs.org/v2/api/#vm-watch