如何在Vue中的另一个组件内设置数据的值

Question

我有两个 vue 组件。一个是打开模态，另一个是以表格和简短形式的形式显示该模态的内容。填写完表单后，我想单击包含内容的组件内的保存按钮，然后将内容保存在数组中并关闭模式。但是该组件位于不同的组件中，并且绑定到同一组件中的字段。我尝试通过直接从我的子组件访问组件将其设置为 false，但它不起作用，即使我可以 console.log 它并看到它是 false。有人可以看看我的代码吗？

对话框组件：

html:

<v-dialog
          class="mx-auto my-auto "
          v-model="dialog"
          persistent
          max-width="fit-content"
          width="fit-content" >
        <template v-slot:activator="{ on, attrs }">
          <v-btn
              color="primary"
              dark
              v-bind="attrs"
              v-on="on"
              rounded
          >
            Add date
          </v-btn>
        </template>
        <v-card>
          <v-card-title>
            <span class="headline">Generate Groups</span>
          </v-card-title>
          <v-card-text>

          </v-card-text>
          <v-divider class="mx-4"/>


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

脚本：

data : ()=>({
    dialog: false,
    menu: false,
    modal: false,
    menu2: false,
    menu3: false,
    meetingsArray: []

  }),

子/内容：

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
    })
    this.newGroup = [],
    finalMeetingArray.push(newMeeting)
    this.newGroup.push(newMeeting)
    console.log(JSON.stringify(this.newGroup))
    MeetingAdminComponent.data().dialog = false;  -> here I am trying to close the 
    modal
    console.log(MeetingAdminComponent.data().dialog) 

  }

Answer 1

您尝试做的可能是反模式。如果您保持分离并使用官方指南中推荐的父/子通信（请参阅下面的参考资料），您的代码会更清晰。他们建议使用道具与您的孩子交流，或使用发射事件与您的父母交流。

例如：您的孩子会...>

methods: {
 myMethod() {
  // Code ....
  // more code
  this.$emit('saved',somedata)
 }
}

你的父母会听...>

<AddGroupsModal v-on:saved="doSomethingAfterSave"></AddGroupsModal>

参考资料： https://vuejs.org/v2/guide/components.html

https://v3.vuejs.org/guide/component-basics.html#listening-to-child-components-events

Answer 2

你试过$refs吗？

<YourComponent ref="yourComponent" />

methods: {
  dispatchChildMethod() {
    this.$refs.yourComponent.childMethod()
  }
}