Flujo de datos unidireccional en Vue
Todos los props forman un enlace unidireccional entre la propiedad secundaria y la principal: cuando se actualiza la propiedad principal, se pasará a la secundaria, pero no al revés. Esto evita la modificación accidental del estado principal por parte de los componentes secundarios, lo que puede dificultar la comprensión del flujo de datos de su aplicación.
Además, cada vez que se actualiza el componente principal, todos los props del componente secundario se actualizarán con los valores más recientes. Esto significa que no debes intentar modificar un prop dentro del componente secundario. Si lo haces, Vue mostrará una advertencia en la consola.
Normalmente hay dos casos en los que surge la tentación de mutar un prop. Vamos a verlos.
Primer caso
El prop se utiliza para pasar un valor inicial; el componente secundario quiere usarlo como una propiedad de datos local en el futuro. En este caso, es mejor definir una propiedad local en data que use el valor del prop como inicial:
props: ['initialCounter'],
data() {
return {
counter: this.initialCounter
};
}
Segundo caso
El prop se pasa como un valor sin procesar que necesita ser transformado. En este caso, es mejor definir una propiedad computada utilizando el prop:
props: ['size'],
computed: {
normalizedSize: function() {
return this.size.trim().toLowerCase();
}
}
Nota
Tenga en cuenta que los objetos y arrays en JavaScript se pasan por referencia, por lo que si un prop es un array o un objeto, los cambios dentro del componente secundario a ese objeto o array afectarán el estado del componente principal y Vue no puede advertirle sobre esto. Debe evitar cualquier mutación de los props, incluidos objetos y arrays, ya que ignorar el enlace unidireccional de datos puede llevar a resultados no deseados.
