Estoy tratando de pasar datos usando proporcionar e inyectar, pero los datos inyectados no son reactivos, ¿alguien puede ayudarme a hacerlo reactivo?
//Parent.vue <template> {{ParentName}} </template> <script> export default { data(){ return{ ParentName: 'Initial Value' } } provide() { return { name: this.ParentName, }; }, } </script>Estoy cambiando el 'ParentName' después de 3 segundos usando el gancho montado'
mounted() { setTimeout(() => { this.ParentName = "New Name"; }, 3000); },En el componente secundario, estoy inyectando el valor.
//Child.vue <template> {{name}} </template> <script> export default { inject:['name'] } </script>Pero obtengo el nombre inyectado como 'Valor inicial', no obtengo el valor actualizado como "Nuevo nombre" después de 3 segundos.
Los provide/inject no son reactivos por defecto. Como se sugiere en la documentación de VUE para hacer que el suministro sea reactivo, debemos estar atentos a cualquier cambio con el cálculo. En el componente padre puede hacer lo siguiente:
provide() { return { name: computed(() => this.ParentName) }Luego, en el niño, simplemente inyéctelo y debería funcionar. Para referencia: https://v3.vuejs.org/guide/component-provide-inject.html#working-with-reactive