你遇到的核心问题是直接访问父组件构造函数的data()方法修改dialog值，并没有影响到当前父组件实例的响应式数据。

为什么原来的代码不生效？ #

MeetingAdminComponent.data()每次调用都会返回一个全新的data对象副本，你修改的只是这个孤立对象里的dialog属性，和当前正在渲染的父组件实例的dialog变量完全无关。Vue的响应式更新依赖组件实例的data，所以弹窗自然不会关闭。

正确的解决方案：通过父子组件通信实现 #

Vue推荐通过Props + 自定义事件的方式实现父子组件通信，下面提供两种常用方案：

方案1：子组件触发关闭事件，父组件响应

这种方式让父组件保持对弹窗状态的控制权，更符合单向数据流原则。

1. 修改父组件的子组件调用：
   给AddGroupsModal添加一个自定义事件监听，用于接收关闭弹窗的通知：

<AddGroupsModal :new-group.sync="meetingsArray" @close-modal="dialog = false"/>

2. 修改子组件的generateGroup方法：
   去掉直接访问父组件的代码，替换为触发自定义事件，同时正确更新父组件的数组：

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

  // 填充参与者数据
  this.model.forEach((model, i) => { 
    const key = `participant${i + 1}`; 
    newMeeting[key] = model.voterUniqueName; 
    newMeeting.startTime = model.startTime; 
    newMeeting.endTime = model.endTime; 
  }); 

  // 通过.sync修饰符的约定，触发数组更新
  this.$emit('update:new-group', [...this.newGroup, newMeeting]); 

  // 触发关闭弹窗的事件
  this.$emit('close-modal'); 
}

方案2：通过.sync修饰符传递弹窗状态

如果希望子组件直接控制弹窗关闭，可以将父组件的dialog通过sync传递给子组件：

1. 父组件修改子组件调用：

<AddGroupsModal :new-group.sync="meetingsArray" :dialog.sync="dialog"/>

2. 子组件声明Props：
   在子组件的props中添加dialog属性：

props: {
  newGroup: {
    type: Array,
    default: () => []
  },
  dialog: {
    type: Boolean,
    default: false
  }
}

3. 子组件修改generateGroup方法：
   通过$emit更新dialog状态：

generateGroup() { 
  // （省略前面的newMeeting构造逻辑）

  // 更新父组件数组
  this.$emit('update:new-group', [...this.newGroup, newMeeting]); 

  // 触发dialog状态更新
  this.$emit('update:dialog', false); 
}

额外优化建议 #

你原来的代码中finalMeetingArray变量定义后没有实际使用，可以直接移除，简化逻辑。另外，在更新数组时使用扩展运算符([...this.newGroup, newMeeting])创建新数组，能确保Vue检测到数组变化并触发响应式更新（Vue无法检测直接修改数组元素或长度的变化，但可以检测数组替换/新增元素的操作）。

内容的提问来源于stack exchange，提问作者natyus