Within my coding project, I am facing the challenge of properly implementing a parent component containing a form that includes a birthday component. This birthday component consists of two separate components within it. My task is to effectively pass props and emit changes between these main components, but I am unsure about what specific props should be passed.
My query revolves around determining the appropriate props to pass and emit. It appears that each nested child component has its own set of defined props, the parent component also has defined props, and the birthday component acts as a mediator between the two. How can I decipher which props to use?
To provide a clearer picture of the structure:
Parent Form Component
^ data v
Birthday Component
^ data v
Select Options && Text Input Components
The props for each component are outlined as follows:
// Parent Form Component
props: {
currentSlide: {
type: String,
required: true
},
totalSlides: {
type: String,
required: true
},
nextRoute: {
type: Object,
required: true
}
}
Here's the code snippet showing the birthday component within the Parent Form Component:
<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"
/>
Props definition for the Select Options Component:
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
}
}
In essence, my goal is to return (or $emit) a string 'yyyy-mm-dd' to the Parent Form Component in order to utilize existing validation methods. However, I am struggling to understand how to successfully achieve this desired outcome.