Cómo operar la transferencia de datos entre los componentes padre e hijo de la clase de formulario Vue
Cuando se utiliza Vue.js para el desarrollo de proyectos, es inevitable utilizar un método de desarrollo basado en componentes. Este método brinda cierta comodidad al desarrollo y mantenimiento, pero si implica la interacción entre componentes, interacción de datos y. La transferencia de estado es algo problemático, especialmente cuando se enfrenta a una gran cantidad de páginas de formulario.
Normalmente hago algo, pero esta publicación de blog implica la transferencia de datos entre componentes principales y componentes secundarios, mientras que Vuex maneja los componentes no principales y los componentes secundarios. En esta publicación de blog, no lo explicaré.
Como indica la documentación, los componentes principales pasan datos a los componentes secundarios a través de accesorios, y los componentes secundarios pasan datos a los componentes principales a través de activadores $emit(), pero el uso es ligeramente diferente.
1. Pasar tipos básicos de datos
Cuando el subcomponente tiene menos contenido, pasará directamente tipos básicos de datos, que generalmente incluyen cadenas, números y booleanos.
Por favor vea el ejemplo:
lt;! -- Componente principal parent.vue --gt;
lt; templategt;
lt; p class="parent"gt; cuestionariolt;/h3gt;
lt;child v-model="form.name"gt;lt;/childgt;
lt;p class=""gt;
lt;pgt;Nombre: {{form.name}}lt;/pgt;
lt;/pgt;
lt;/pgt;
lt;/pgt;
lt;/templategt;
lt;scriptgt;
importar niño desde '.
exportar componentes predeterminados {
: {
hijo
},
datos () {
return {
formulario: {
nombre: 'Ingrese un nombre'
}
}
}
}
lt;/scriptgt;lt;! -- Subcomponente child.vue --gt;
lt; templategt;
lt; p class="child"gt; /p>
Nombre: lt; tipo de entrada="texto": valor="valoractual"@input="cambiarNombre"gt
lt;/labelgt; ;/pgt;
lt;/templategt;
lt;scriptgt;
exportar accesorios predeterminados {
: {
p>// Este atributo de propiedad debe ser un valor, porque v está vinculado a un valor cuando se expande el modelo v
valor: ''
},
métodos: {
changeName (e) {
// Vincula el método changeName al evento de entrada del elemento de entrada
// Ejecute este método cada vez, se activará la entrada del evento personalizado y se pasará el valor del cuadro de entrada.
this.$emit('input', e.target.value)
}
}
}
lt;/scriptgt; Vincula el método changeName al evento de entrada del subcomponente. Cada vez que se ejecuta el método, se activará la entrada del evento personalizado y se ingresará el valor del cuadro de entrada.
El componente principal vincula un valor a través de la directiva v-model para recibir datos del componente secundario. Pero esta es solo la respuesta del componente principal a los datos del componente secundario. Si desea que el componente secundario responda a los datos pasados por el componente principal, debe definir un valor de atributo de accesorios para el componente secundario, y el atributo debe ser valor y no puede contener otras palabras.
v-model es en realidad una especie de azúcar sintáctico. Para obtener más información, consulte Componentes de entrada de formulario que utilizan eventos personalizados.
2. Pasar datos de referencia
Cuando hay mucho contenido en un subcomponente, por ejemplo, hay varios elementos de formulario en un subcomponente, si vincula cada uno de ellos. elemento de formulario como arriba. Si establece un valor, tendrá que escribir mucho código repetitivo. Entonces, esta vez normalmente estás pasando un objeto, el principio básico de pasar un valor sigue siendo el mismo, pero la forma en que está escrito es un poco diferente.
O eche un vistazo primero al código:
lt;! -- Componente principal parent.vue --gt;
lt; templategt;
lt; p class="parent"gt; cuestionariolt;/h3gt;
lt;child .formData.sync="form"gt;lt;/childgt;
lt;p class=""gt;
lt;pgt;Nombre: {{form.name}}lt;/pgt;
lt;/pgt;
lt;/pgt;
lt;/pgt;
lt;/templategt;
lt;scriptgt;
importar niño desde '.
exportar componentes predeterminados {
: {
hijo
},
datos () {
retorno {
formulario: {
nombre: 'Por favor, ingresa un nombre',
edad: '21'
}
}
}
}
}
}
lt;/scriptgt;lt;! -- Subcomponente child.vue --gt;
lt;
lt; p class="child"gt; /p>
Nombre: lt; tipo de entrada="texto" v-model="form.name"gt
lt;/labelgt
lt;
lt; labelgt;
Edad: lt; tipo de entrada="text" v-model="form.age"gt; ; <
lt; labelgt;
Ubicación: lt; tipo de entrada="text" v-model="form.address"gt; /labelgt;
lt;/pgt;
lt;/pgt;
lt;/templategt;
lt;scriptgt ;
exportar datos predeterminados {
() {
devolver {
formulario: {
nombre: ' ',
edad: '',
dirección: ''
}
}
}
},
props: {
// Esta propiedad de propiedad recibe el valor pasado por el componente principal
formData:
},
watch: {
// Dado que no podemos modificar directamente las propiedades en los accesorios, no podemos vincular directamente formData a través del v-model
//Aquí tenemos que escuchar
formData y asignar inmediatamente el valor al formulario en datos cuando cambie
formData: {
inmediato: verdadero,
handler (val) {
this.form = val
}
}
}
},
montado () {
// los accesorios son un flujo de datos unidireccional, creado al activar eventos de actualización. Al vincular formData,
// Apunte el formulario en los datos al objeto vinculado por el componente principal a través de formData
// El componente principal debe agregar .sync Al vincular formData
this.$emit('update: formData', this. form)
}
}
lt;/scriptgt; Es un flujo de datos unidireccional. Cuando necesitamos vincular propiedades en accesorios en dos direcciones, debemos usar el modificador .sync.
Cabe señalar que no puede modificar los accesorios directamente en vue, por lo que si desea pasar un valor al componente principal, debe modificar el valor en los datos, y los accesorios solo están entre el componente principal. componente y el componente secundario Un intermediario.
Además, si queremos obtener una vista previa de los datos pasados por el componente principal al principio, debemos escuchar la propiedad a través de watch y pasar el valor al inicializar el componente secundario.
Nota: La razón por la que monté this.$emit('update:formData', this.form) en el componente secundario es para evitar activar la personalización en el evento de entrada de cada evento de etiqueta de entrada, pero esto se basa en la premisa de que los componentes padre e hijo utilizan un solo objeto.
Esta es la razón por la que en el código anterior, cuando el componente principal usa: formData.sync="form" para vincular el valor, el formulario es un objeto, y cuando el componente secundario activa el evento personalizado, esto.$ emit ('update:formData', this.form), this.form también debe ser un objeto.
También tenga en cuenta que si tiene varios componentes secundarios que usan un solo objeto, desea evitar esta situación, porque si un componente cambia los datos en ese objeto, todos los demás componentes secundarios también cambian.
Entonces, cuando uso esto, asigno a cada componente secundario su propio objeto, por ejemplo:
data () {
return {
parentObject: {
child_1_obj: {},
child_2_obj: {},
}
}
p>
} Estos son datos definidos en el componente principal, pero el nombre, por supuesto, no se usa de esa manera.
Fin
No hay nada más que decir. Todavía estoy usando Vue y no sé lo suficiente sobre las cosas subyacentes. Realmente quiero leer el código fuente, pero esto es. siempre es solo una idea.. .... Me encantaría leer el código fuente, pero siempre pienso en ello.
Creo que dominas el método después de leer este artículo. Para obtener más información interesante, ¡presta atención a otros artículos relacionados en Gxl.com!
Lectura recomendada:
El uso de JS para determinar el contenido de la cadena contiene un resumen de métodos.
Animación de partículas de eventos de mouse de enlace real JS HTML5