Vue - Props and Emits through nested components

Question

I have a parent component that houses a form where there's a birthday component within the form and the birthday component has two different components within it. I'm tasked with implementing these two main components (the form parent component and the birthday component) to pass props and emit changes up and confused as to what those props should be.

My question around this is, how do I know what to pass as props and emit up? It seems the most nested child component has defined props, the parent component has defined props and the birthday component is the middle-man between the two. How do I determine what to use as props??

For a visual of what I'm working with:

Parent Form Component

    ^ data v

Birthday Component

    ^ data v

Select Options && Text Input Components

The props from each component is:

// Parent Form Component

  props: {
    currentSlide: {
      type: String,
      required: true
    },
    totalSlides: {
      type: String,
      required: true
    },
    nextRoute: {
      type: Object,
      required: true
    }
  }

Here's the birthday component within the Parent Form Component:

Props 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
    }
  }

Objectively, I would like to return (or rather $emit) a string in return 'yyyy-mm-dd' to the Parent Form Component to get passed through the existing validation methods we have, but for the life of me, I can't seem to grasp how to return the value I want.

user_2523531 · Answer

You can always chain $parent variable in your component like

this.$parent.$parent ...

And this way you can run parent's methods.

You can also, emit to parent and then catch the event and emit again to parent component. However, you can not pass a variable that changed by the child as a prop. Vue will throw an error If you do that.

Actually your select component should emit @change event to parent so, you don't have care what is inside of your select component (if your component is a package from somewhere else It should be emitting already)

If you really want to send value as a prop and edit it, you should use sync modifier

I found a article about it here you can read it.

Another method, you can create copy of your prop inside your select component and change then emit it to the parent again. In you template you can use your local variable.

user_15998872 · Answer

You can emit the end result string like

receive final date

function: updatedDate(date){
console.log(date)
}

// receive date as prop in emit

function: updatedDate(date){
this.$emit(chnagedDate,date);
}

// and after making new date you can pass as in emit prop

this.$emit(changedDate,newDate);

hope it will be helpful another way around is to use store and update state from anywhere

Vue - Props and Emits through nested components

2 Answers