Supongamos que vamos a hacer un editor de texto.

Al escribir, el componente C (sección de entrada de texto) necesita el estado del componente B (selector de estilo de fuente) para determinar qué estilo usar.

Podemos compartir ese estado por Vuex, pero en OOP, es mejor poner la lógica o las variables relacionadas en la misma clase, y cuando otros componentes necesitan el estado de ese objeto, solo para referirlo directamente.

Si quiero hacer referencia a los componentes directamente, una forma es guardar algunos componentes cuando están montados y pasarlos como accesorios a otros componentes de la siguiente manera.

 // in <template> <FontStylePickerVue ref="stylePicker" /> <TextInputSectionVue ref="textInputSection" v-bind="{ tylePickerComp: stylePickerComp }" /> //in Main Component <script> mounted(){ this.tylePickerComp = this.$refs.stylePicker; } data(){ return { tylePickerComp : null } }

En Vue, aunque hay muchas formas de comunicarse entre los componentes, nunca vi que ninguno de ellos pasara la instancia del componente como accesorios directamente de esta manera. (Funciona, y muy conveniente aunque.)

Sé que hacer esto, en cierto modo, hace que el sistema sea más complicado porque los componentes se refieren entre sí en una relación compleja, pero me pregunto si hay algún patrón de diseño como este en Vue, o hacer esto tiene algunas desventajas como bajo rendimiento, etc.

Al final, para aclarar la idea, quiero comparar qué pasa si paso el componente como accesorios directamente o uso métodos comunes en este ejemplo:

1. Pase el componente como accesorios directamente:
   Es necesario guardar la referencia del componente en el montaje, pero la declaración de tipo es una vez por todas (por ejemplo, use InstanceType). Necesito lidiar con nulo (es nulo antes de montarlo).

2. Autobús de eventos:
   Emita un evento con una función de resolución de promesa como devolución de llamada para hacer que otros componentes se resuelvan con su estado. Esto es bueno porque mantendrá los datos o la lógica en la misma clase (en comparación con el uso de Vuex), pero debe escribir su método en un estilo de promesa para leer el resultado resuelto.

3. Vuex:
   Divida algunas variables en alcance global, y esto no es tan compatible para casos en los que es mejor recopilar lógica y datos en el mismo lugar.

Solo quiero tener una idea de este tema, lo siento por el artículo largo.