如何获取 Vue.js 中的道具值？

Question

我想在 Vue.js 中获取道具值，因为我需要在我的组件中接收eid来进行验证，但我不知道我该怎么做，如果我这样做的话。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中，我的道具是

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

不知道怎么弄，有人知道吗？ ：/

Answer 1

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

看来您可能混淆了父母和孩子，所以我将尝试展示如何通过两种方式通过 eid。

如果您想将子 stream 组件中的 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)
},

这样，如果 stream eid 为 0，就像这里一样，组件将不会呈现。

但是，如果您需要将 eid 从父组件传递到 stream 组件，它看起来像这样：

组件 A（父级）

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

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

B 部分（儿童）

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

这样，您将进入控制台父母的开斋节。

Answer 2

如果您尝试将event.id作为属性发送到 stream，那么您可以简单地这样做

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

然后从Stream.vue组件中，您可以收到如下属性

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