Tengo un componente principal que alberga un formulario en el que hay un componente de cumpleaños dentro del formulario y el componente de cumpleaños tiene dos componentes diferentes. Tengo la tarea de implementar estos dos componentes principales (el componente principal del formulario y el componente de cumpleaños) para pasar accesorios y emitir cambios y confundirme en cuanto a cuáles deberían ser esos accesorios.
Mi pregunta sobre esto es, ¿cómo sé qué pasar como accesorios y emitir? Parece que el componente secundario más anidado tiene accesorios definidos, el componente principal tiene accesorios definidos y el componente de cumpleaños es el intermediario entre los dos. ¿Cómo determino qué usar como accesorios?
Para una imagen de lo que estoy trabajando con:
Parent Form Component ^ data v Birthday Component ^ data v Select Options && Text Input ComponentsLos accesorios de cada componente son:
// Parent Form Component props: { currentSlide: { type: String, required: true }, totalSlides: { type: String, required: true }, nextRoute: { type: Object, required: true } }Aquí está el componente de cumpleaños dentro del componente de formulario principal:
<Birthday :value="$v.form.dob.model" // was informed this was passing a prop from a peer :show-errors="fieldErrors" describedBy="edit-dob-error" @input="v => setAge(v)" ref="dobInput" />Accesorios para el componente Seleccionar opciones:
props: { options: { type: Array, require: true }, header: { type: String, required: false }, value: { type: String, required: false }, dateSelected: { type: Boolean, required: false }, narrow: { type: Boolean, required: false }, textInput: { type: Boolean, required: false }, year: { type: [String, Number], required: false } }Objetivamente, me gustaría devolver (o más bien $emit) una cadena de retorno 'yyyy-mm-dd' al Componente de formulario principal para pasar a través de los métodos de validación existentes que tenemos, pero por mi vida, puedo ' Parece que no entiendo cómo devolver el valor que quiero.
Siempre puede encadenar la variable principal $ en su componente como
this.$parent.$parent ...Y de esta manera puedes ejecutar los métodos de los padres.
También puede emitir al componente principal y luego capturar el evento y emitir nuevamente al componente principal. Sin embargo, no puede pasar una variable que el niño cambió como accesorio. Vue arrojará un error si haces eso.
En realidad, su componente de selección debería emitir el evento @change al padre, por lo que no le importa qué hay dentro de su componente de selección (si su componente es un paquete de otro lugar, ya debería estar emitiendo)
Si realmente desea enviar valor como accesorio y editarlo, debe usar el modificador de sincronización
Encontré un artículo sobre esto aquí , puedes leerlo.
Otro método, puede crear una copia de su accesorio dentro de su componente seleccionado y cambiarlo y luego emitirlo al padre nuevamente. En tu plantilla puedes usar tu variable local.
Puede emitir la cadena de resultado final como
receive final date </birthday-form-component @chnagedDate=UpdatedDate> function: updatedDate(date){ console.log(date) } // receive date as prop in emit </birthday-component @changedDate=updatedDate> function: updatedDate(date){ this.$emit(chnagedDate,date); } // and after making new date you can pass as in emit prop </select-component> this.$emit(changedDate,newDate);espero que sea útil otra forma es usar el estado de almacenamiento y actualización desde cualquier lugar