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

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

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