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

Question

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

脚本：

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

Answer 1

您不能修改组件内的道具。 假设道具被称为模型而不是 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) } } }

Answer 2

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

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

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