javascript - 如何获取 Vue.js 中的 props 值？

Question

我想在 Vue.js 中获取 prop 值，因为我需要在组件中接收 eid 来进行验证，但我不知道如何做到这一点以及如果我do this.configs.eid 是未定义。另一种方法是将 data() 值从我的组件 A 发送到组件 B。

我有这个组件，我需要获取eid，然后插入v-if

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

另一种方法是将这个data()从组件A发送到组件B

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

在组件A中，我的 Prop 是

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

不知道怎么获取，有谁​​知道吗？ :/

Answer 1

你的问题不清楚，没有定义哪个组件是A，哪个组件是B。

看来您可能混淆了父级和子级，因此我将尝试展示如何以两种方式传递 eid。

如果你想将 eid 从子流组件传递给父级进行 v-if 检查(我认为是这种情况)，你需要使用 $emit，而不是 prop:

组件 A(父级)

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

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

组件 B(子级)

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

这样，如果流 eid 为 0，就像这里一样，组件将不会渲染。

但是，如果您需要将 eid 从父组件传递到流组件，则如下所示:

组件 A(父级)

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

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

组件 B(子级)

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

这样您就可以在控制台中获取 parent 的 eid。