Os Documentos / Guia da API do Vue falam sobre o padrão de pais passando adereços para os filhos, que se comunicam com os pais por meio de eventos. Além disso, o guia enfatiza que os filhos absolutamente não devem alterar os dados dos pais, pois essa é a responsabilidade dos pais.

Para uma estrutura basicamente plana em que você tem um pai (por exemplo, 'App') e todos os componentes são filhos desse pai, isso funciona bem; qualquer evento só precisa borbulhar uma vez.

No entanto, se você estiver compondo uma estrutura que é compartimentada (por exemplo, App (mantém estado) -> ActiveComponent -> FormGroup -> Inputs ...), a criação de interação nas partes mais profundas (como o FormGroup / Inputs) exige a criação de uma cadeia de eventos em cada conexão. A entrada precisará fazer um eventov-on:keyup.enter="addInputValue"; o FormGroup precisará ter umv-on:addInputValue="bubbleInputValue"; O ActiveComponent precisará de umv-on:bubbleInputValue="bubbleInputValue"; e, finalmente, o aplicativo precisará responder abubbleInputValue.

Parece realmente absurdo que todo elo da cadeia precise saber como ser responsável por lidar com o borbulhar de um evento queApp quer saber sobre o ramo mais profundo daInput. O guia Vue sugere um padrão da State Store para lidar com isso - mas isso não trata do encadeamento (como você está simplesmente adicionando uma raiz diferente; a Store).

Existe uma convenção / padrão aceito para lidar com a dificuldade de comunicação que atravessa uma árvore alta de componentes?