Una imagen ilustra claramente los problemas esenciales de los componentes padre-hijo de Vue3 que pasan valores y si los accesorios se pueden cambiar.

Para evitar confusiones, primero introduzcamos las clases utilizadas en el lenguaje back-end.

Las clases generales pueden contener miembros internos, propiedades, métodos, eventos, etc.

Los miembros internos son generalmente privados (de hecho, también se pueden configurar como públicos. La persona que llama no puede acceder directamente a los miembros internos, pero debe acceder a los miembros internos a través de atributos).

El atributo es un canal seguro para miembros internos. Puede restringir métodos de acceso, como solo lectura; también puede establecer niveles, como edad > 18 y edad < 60 >; 60 pueden pasar.

Los componentes de Vue también pueden configurar datos, accesorios, cálculos, métodos, etc., que se parecen mucho a las configuraciones de clase, pero son esencialmente diferentes.

Por lo tanto, no aplique rígidamente la comprensión y el uso de clases a los componentes padre-hijo de Vue, sino preste atención a la distinción.

Ahora analicemos si los accesorios se pueden cambiar.

Según el sitio web oficial, los accesorios de los subcomponentes no se pueden modificar por este motivo, por lo que muchas personas también dijeron que no se pueden cambiar, y este es el caso si se cambian.

¿Cuál es entonces la razón esencial? Para saber qué está pasando, ¡también necesitas saber por qué está pasando!

Comencemos con los tipos de datos de js. Los tipos de js son bastante confusos. Desde la perspectiva de la transmisión, se pueden dividir en tipos de transferencia de valores y tipos de referencia. .

Para los tipos de transferencia de valores, después de pasar la copia, la copia no tiene conexión con la "entidad original". Cualquier cambio en la copia no afectará a la "entidad original".

El tipo de referencia transfiere su propia dirección (puntero), por lo que los atributos del "original" se pueden modificar a través de la dirección, de modo que cambiar la copia puede afectar al "original".

Estos dos métodos de entrega determinan si los accesorios del componente vue se pueden cambiar o no.

A menudo utilizamos accesorios de componentes, entonces, ¿cómo se ven los accesorios?

Tomemos Vue3 como ejemplo para analizar. Configuramos un componente principal-hijo simple y configuramos varios tipos comunes:

El componente secundario define accesorios, con tipos y referencias básicos. Escriba varios miembros. Los tipos básicos deben modificarse mediante emisión, y los tipos de referencia (reactivos) pueden modificarse directamente mediante el principio de interceptación del proxy.

Plantilla:

js:

El componente principal define varios tipos de datos y los pasa al componente secundario. Utilice ref para tipos básicos y reactivo para tipos de referencia. Porque puede responder.

Primero echemos un vistazo al resultado de impresión de los accesorios y descubramos que es un proxy de muñeca anidada:

En vue3, reactivo, superficialReactivo, de solo lectura y de solo lectura superficial todos usan proxy. Entonces, ¿cuál es cuál?

Una prueba simple mostrará que es de solo lectura superficial (sólo lectura superficial), por lo que la pregunta es, dado que no se permite cambiarlo, ¿por qué no usar solo lectura? ¿Se omitió?

Supongo que esta es una solución de compromiso después de equilibrar varias necesidades.

Entonces tal vez el funcionario, para evitar una carga mental, simplemente dijo que no se debían cambiar los accesorios, lo que evitaría problemas.

Para aquellos que entienden el principio, pueden pasar el tipo de referencia para lograr un método de operación más simple.

La figura anterior expresa claramente el flujo de datos.

Un ejemplo común es el "formulario de visualización emergente".

Tome element-plus como ejemplo:

Componente principal:

Componente secundario

Plantilla

De esta manera, tanto el elemento principal como el secundario Los componentes pueden controlar fácilmente el diálogo el.