如何在同一个 vue 组件中使用 props答案

【问题标题】：How to use props inside the same vue component如何在同一个 vue 组件中使用 props
【发布时间】：2021-09-11 16:56:49
【问题描述】：

我有一个 vue 模态组件，我在其中定义了一个带有一个数组的道具，我想稍后将其传递给另一个打开模态的组件。但是当我尝试访问我的模态组件中的道具时，我收到了未定义的错误。即使稍后在我的代码中识别出该道具，我也无法修复它，但它是未定义的。有人可以看看我的代码吗？

脚本：

<script>
import axios from "axios";

export default {
  name: "AddGroupsModal",

  data : ()=>({
    model : [],
}),
  props:{
    newGroup: []
  },


methods: {

  generateGroup(){
     const newMeeting = {meetingUrl: "", meetingName: "", date: this.selectedDate, 
      startTime: "", endTime: ""};
    let finalMeetingArray = [];

    this.model.forEach((model, i) => {
      const key = `participant${i + 1}`;
      newMeeting[key] = model.voterUniqueName;
      newMeeting.startTime = model.startTime;
      newMeeting.endTime = model.endTime
    })
    finalMeetingArray.push(newMeeting)
    this.newGroup.push(newMeeting)
    console.log(JSON.stringify(this.newGroup)
  }

}
}

</script>

【问题讨论】：

调用时如何将 prop 传递给组件？
现在我根本没有传递它，只是试图将它填充到定义 prop 的组件中。我是否必须通过它才能使它不是未定义的？
我现在的问题不是传递它，而是定义 prop 的组件说它是未定义的
您正在以正确的方式访问该道具，但该道具内没有任何内容，这就是它说它未定义的原因。 undefined 是 JS 告诉你这个变量没有值的方式。你要么需要为这个道具设置一个默认值，要么给它传递一些东西。
不，这不是办法，应该是：props: { newGroup: { type: Array, default: [] } }

标签： javascript typescript vue.js vuetify.js

【解决方案1】：

你不能修改组件内部的 props。假设 prop 被称为 model 而不是 newGroup，你的 JS 就可以工作了

export default {
  name: "AddGroupsModal",

  data : ()=>({
    newGroup : [],
}),
  props:{
    model: []
  },


methods: {

  generateGroup(){
     const newMeeting = {meetingUrl: "", meetingName: "", date: this.selectedDate, 
      startTime: "", endTime: ""};
    let finalMeetingArray = [];

    this.model.forEach((model, i) => {
      const key = `participant${i + 1}`;
      newMeeting[key] = model.voterUniqueName;
      newMeeting.startTime = model.startTime;
      newMeeting.endTime = model.endTime
    })
    finalMeetingArray.push(newMeeting)
    this.newGroup.push(newMeeting)
    console.log(JSON.stringify(this.newGroup)
  }

}
}

【讨论】：

【解决方案2】：

确保您在 kebab-case 中而不是在 camelCase 中传递道具。

如果你的道具是newGroup，你应该像这样传递它：

<template>
   <add-groups-modal :new-group="[ ... ]" />
</template>

【讨论】：

这个 applies only 到 in-DOM 模板...
@MichalLevý 是的，你是对的，谢谢。但是，您的问题中没有足够的信息，我必须从某个地方开始。