如何从模态组件发出事件并将数组发送到父组件

从模态组件发出事件并将数组发送到父组件的方法可以通过以下步骤实现：

在模态组件中，创建一个数组，并将需要发送给父组件的数据添加到数组中。
在模态组件中，创建一个自定义事件，并在需要发送数据的地方触发该事件。可以使用$emit方法来触发事件，并将数组作为参数传递给事件。
在父组件中，使用v-on指令监听模态组件发出的自定义事件。可以在父组件的模板中使用v-on:自定义事件名来监听事件。
在父组件的事件处理方法中，接收传递过来的数组参数，并进行相应的处理。

下面是一个示例代码：

模态组件（ModalComponent.vue）：

<template>
  <div>
    <!-- 模态框内容 -->
    <div class="modal-content">
      <!-- 模态框表单 -->
      <form>
        <!-- 表单项 -->
        <input type="text" v-model="dataItem" />
        <!-- 提交按钮 -->
        <button @click="submitData">提交</button>
      </form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataItem: '',
    };
  },
  methods: {
    submitData() {
      // 创建一个数组，并将数据添加到数组中
      const dataArray = [this.dataItem];

      // 触发自定义事件，并将数组作为参数传递
      this.$emit('data-submitted', dataArray);
    },
  },
};
</script>

父组件（ParentComponent.vue）：

<template>
  <div>
    <!-- 按钮，点击打开模态框 -->
    <button @click="openModal">打开模态框</button>

    <!-- 模态框组件 -->
    <modal-component v-if="showModal" @data-submitted="handleData"></modal-component>
  </div>
</template>

<script>
import ModalComponent from './ModalComponent.vue';

export default {
  components: {
    ModalComponent,
  },
  data() {
    return {
      showModal: false,
      receivedData: [],
    };
  },
  methods: {
    openModal() {
      this.showModal = true;
    },
    handleData(dataArray) {
      // 接收传递过来的数组参数，并进行处理
      this.receivedData = dataArray;
    },
  },
};
</script>

在上述示例中，模态组件中的输入框用于输入数据，点击提交按钮时，会将输入的数据添加到数组中，并通过触发自定义事件data-submitted将数组发送给父组件。父组件中的按钮用于打开模态框，当模态框打开时，会显示模态组件。父组件通过监听模态组件发出的自定义事件data-submitted，并在事件处理方法handleData中接收传递过来的数组参数，并进行处理。

请注意，上述示例中的代码仅为演示目的，实际应用中可能需要根据具体情况进行适当的修改和调整。