Cómo utilizar el enlace bidireccional en Vue2
En la mayoría de los casos, no se requiere enlace bidireccional y el flujo de datos unidireccional facilita el seguimiento de los cambios de datos y la resolución de problemas. Sin embargo, en algunos escenarios de aplicaciones específicos (como ventanas emergentes), además de controlar la visualización y ocultación del componente principal, también es necesario controlar la visualización y ocultación de botones dentro del componente, como cerrar y cancelar. botones. Esto se puede lograr activando un evento que permita al componente principal modificar el estado de visualización, pero cada componente emergente debe hacerlo repetidamente.
v-model
v-model es la única instrucción de enlace bidireccional en Vue2 que admite el enlace de control de formulario, pero esto no significa que solo se pueda usar en controles de formulario. . Como se menciona en la documentación sobre componentes de entrada de formulario que utilizan eventos personalizados, v-model es en realidad un azúcar sintáctico.
Es decir, simplemente declaras una propiedad de nombre-valor en tu componente y pasas un valor activando un evento de entrada, modificando así ese valor.
Referencia en el componente principal
Componente secundario
const myComponent = {
plantilla: '<.div>
{{value}}
props: {
valor: String
},
métodos:{
changeTitle() {< / p>
this.$emit('input', 'subcomponent')
}
}
}
En En el ejemplo anterior, el título pasado por el componente principal se muestra inicialmente. Después de hacer clic en el botón del componente secundario, el valor mostrado cambiará al valor mostrado del componente secundario.
Cerrar la ventana emergente mediante el control dentro del componente
Ahora se solucionó un problema con el componente emergente que se cerraba internamente.
Demostración
Enlace bidireccional de múltiples campos
Un componente solo puede definir un modelo v ¿Qué sucede si quiero vincular múltiples valores en dos direcciones? ¿administrar?
El modelo v no limita el tipo de datos del valor, ¡sólo que es un valor! Entonces simplemente cambie el tipo de datos del valor a un objeto o una matriz y pase el campo adicional como una propiedad del objeto o un elemento de la matriz, no importa cuántos valores haya.
Desde la perspectiva de las mejores prácticas, este método solo se recomienda en escenarios de aplicación específicos, como componentes de formulario personalizados.