How can I get the props values in Vue.js?

Question

I'd like to get prop values in Vue.js, because i need to receive eid in my component to do verification, but i don't know how can i do this and if i do this.configs.eid is undefined . Another way is send data() value from my component A to component B .

I have this component and i need to get eid then insert in v-if

<section v-if="" >
  <stream  :configs="{eid : event.id}"></stream>
</section>

Another way is send this data() from component A to component B

data() {
  return {
    tipo: String,
    link: String,
    eid : 0
  };
}

In component A my props is

props: {
    configs: {
      type: Object
    }
  },

I don't know how to get it, anybody knows? :/

Answer 1

Your question is not clear, there is no definition which component is A and which is B.

It seems that you may have mixed up parent & child, so I'll just try to show how to pass eid both ways.

If you want to pass eid from the child stream component to the parent for v-if check (which I think is the case), you need to use $emit, not prop:

Component A (Parent)

<section v-if="event.id == 0">
    <stream @get-event-id="getEventId"></stream>
</section>

data() {
    configs: {
        event: {}
    }
},
methods: {
    getEventId(id) {
        this.configs.event.id = id
    }
}

Component B (Child)

data() {
    event: {id: 0}
},
mounted(){
    this.$emit('get-event-id', this.event.id)
},

That way if stream eid will be 0, like here, the component will not render.

However, if you would need to pass eid from parent component to stream component, it would look like this:

Component A (Parent)

<section v-if="">
    <stream :configs="{eid : event.id}"></stream>
</section>

data() {
    event: {id: 0}
}

Component B (Child)

props: ['configs'],
mounted(){
    console.log(this.configs.eid)
},

This way you will get in console the parent's eid.

Answer 2

If you're trying to send the event.id to stream as property, then you can simply do it like this

<section v-if="" >
  <stream  :eventId="event.id"></stream>
</section>

Then from the Stream.vue component, you can receive the property like

export default {
    name: "Stream",
    props: ["eventId"]
}