Fluxo de Dados Unidirecional no Vue
Todas as props formam uma ligação unilateral entre a propriedade filha e a pai: quando a propriedade pai é atualizada, ela será transmitida para a filha, mas não o contrário. Isso evita que componentes filhos alterem acidentalmente o estado do componente pai, o que pode dificultar o entendimento do fluxo de dados do seu aplicativo.
Além disso, sempre que o componente pai for atualizado, todas as props do componente filho serão atualizadas com os valores mais recentes. Isso significa que você não deve tentar alterar uma prop dentro de um componente filho. Se você fizer isso, o Vue exibirá um aviso no console.
Geralmente, há dois casos em que surge a tentação de modificar uma prop. Vamos analisá-los.
Primeiro Caso
A prop é usada para passar um valor inicial; o componente filho deseja usá-lo como uma propriedade local de dados posteriormente. Nesse caso, é melhor definir uma propriedade local nos dados que use o valor da prop como seu valor inicial:
props: ['initialCounter'],
data() {
return {
counter: this.initialCounter
};
}
Segundo Caso
A prop é passada como um valor bruto que precisa ser transformado. Nesse caso, é melhor definir uma propriedade computada usando o valor da prop:
props: ['size'],
computed: {
normalizedSize: function() {
return this.size.trim().toLowerCase();
}
}
Observação
Observe que objetos e arrays em JavaScript são passados por referência, portanto, se uma prop for um array ou um objeto, quaisquer alterações feitas dentro do componente filho a esse objeto ou array afetarão o estado do pai, e o Vue não é capaz de avisar sobre isso. Quaisquer mutações em props devem ser evitadas, inclusive de objetos e arrays, pois ignorar o vínculo unidirecional de dados pode levar a resultados indesejados.
