Una imagen explica claramente las cuestiones esenciales de la transferencia de valor de los componentes padre-hijo de Vue3 y si los accesorios se pueden reemplazar.
Las clases genéricas pueden contener miembros internos, propiedades, métodos, eventos, etc.
Los miembros internos generalmente son privados (de hecho, también pueden configurarse como públicos). La persona que llama no puede acceder a los miembros internos directamente, pero accede a los miembros internos a través de propiedades.
Los atributos son canales seguros para los miembros internos. Pueden restringir los métodos de acceso, como solo lectura; también pueden establecer puntos de control, como la edad>; También se pueden utilizar datos, propiedades, cálculos, métodos, etc. para configurar. Parece similar a la configuración de clase, pero es esencialmente diferente.
Así que no pongas la comprensión y el uso de las clases en los componentes padre-hijo de Vue, presta atención a la distinción.
Ahora analicemos si los accesorios se pueden cambiar.
El sitio web oficial dice que los accesorios no se pueden modificar en subcomponentes por varias razones, por lo que mucha gente hace lo mismo y dice que no se pueden modificar.
¿Cuál es entonces la razón esencial? ¡Sabes lo que es y sabes por qué es así!
Esto comienza con el tipo de datos js. Los tipos de JS son bastante confusos y hay muchas formas de dividir JS. Desde una perspectiva de entrega, JS se puede dividir en tipos transitivos y de referencia.
Para los tipos de valor, después de pasar la copia, no hay conexión entre la copia y el "original". La copia se puede cambiar a voluntad sin afectar el "carácter original".
El tipo de referencia pasa su propia dirección (puntero), por lo que puede modificar las propiedades del "original" a través de la dirección, de modo que cambiar la copia puede afectar al "original".
Los accesorios del componente vue se pueden cambiar o no, lo cual se debe a estos dos métodos de transmisión.
A menudo utilizamos accesorios de componentes, entonces, ¿cómo se ven los accesorios?
Aquí tomamos Vue3 como ejemplo para el análisis. Configuramos un componente padre-hijo simple y configuramos varios tipos comunes:
El componente hijo define un accesorio, que tiene varios miembros: un tipo básico y un tipo de referencia. 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 que se pasarán al componente secundario. Utilice ref para tipos base y reactivo para tipos de referencia. Porque responde.
Echemos un vistazo al resultado de la impresión de los accesorios y descubramos que es un proxy de muñeca:
En vue3, reactivo, superficialReactivo, de solo lectura y de solo lectura superficial todos usan proxies, por lo que uno es?
Una prueba simple mostrará que es de solo lectura superficial, así que aquí viene el problema. Dado que no se permiten cambios, ¿por qué no utilizar solo lectura? ¿Falta?
Supongo que se trata de un compromiso entre varias necesidades.
Entonces, para evitar la carga mental, el funcionario puede simplemente decir que no se cambiarán los accesorios para evitar problemas.
Para aquellos que conocen el principio, se puede lograr un método de operación más conciso a través de tipos de referencia.
El diagrama anterior expresa claramente el flujo de datos.
Un ejemplo común es un "formulario de visualización emergente". Tome element-plus como ejemplo:
Componente principal:
Componente
Plantilla
De esta manera, tanto el componente principal como el secundario Se puede controlar fácilmente el cuadro de diálogo el localmente.