关闭子模态框组件时如何清空数组Prop？

核心问题 #

1. 父组件模板存在prop绑定错误：子组件接收的selectedItems prop，父组件却绑定了未定义的items，实际应绑定selectedRows。
2. 子组件直接修改prop：selectedItems.splice(0)违反Vue单向数据流原则，导致父组件的selectedRows被意外清空，引发第二次打开模态框时数据丢失。
3. 事件触发顺序与数据更新逻辑存在漏洞：依赖row-selected的时机不可靠，可能导致点击行时数据未及时同步。

修正后的父组件代码 #

<template>
  <b-container>
    <b-card class="mt-4 mb-4">
      <h5>{{ $t('errorLogs.errorLog') }}</h5>
      <common-table
        :items="items"
        :fields="fields"
        :per-page="[10, 25, 50]"
        selectable
        :select-mode="'single'"
        @row-selected="onRowSelected"
        @row-clicked="showModal"
        include-actions
        sort-desc
      />
    </b-card>

    <!-- 修正prop绑定，监听子组件关闭事件 -->
    <error-log-entry-modal 
      ref="myModal" 
      :selectedItems="selectedRows"
      @close="clearSelectedRows"
    />
  </b-container>
</template>

<script>
import myModal from '@/components/myModal';

export default {
  components: {
    myModal,
  },
  data() {
    return {
      items: null,
      selectedRows: []
    };
  },
  computed: {
    fields() {
      return [
        {
          key: 'name',
          label: this.$t('errorLogs.name'), // 修正未定义的name变量
        },
      ]
    }
  },
  methods: {
    onRowSelected(fields){
      this.selectedRows = fields;
    },
    // 优化showModal：直接利用row-clicked返回的行数据，确保数据及时同步
    showModal(rowData){
      if(rowData){
        this.selectedRows = [rowData]; // 单选场景存为数组
        this.$refs.myModal.show();
      } else if(this.selectedRows.length > 0){
        this.$refs.myModal.show();
      }
    },
    // 父组件负责清空选中数据，遵循单向数据流
    clearSelectedRows(){
      this.selectedRows = [];
    }
  }
};
</script>

修正后的子组件代码 #

<template>
  <b-modal
    modal-class="data-modal"
    v-model="showModal" <!-- 修正v-model绑定变量错误 -->
    ok-only
    size="xl">
    <!-- 修正v-for语法与插值错误 -->
    <b-row class="lg-12" v-for="(item, index) in selectedItems" :key="index">
      <b-col class="ml-2 mr-2 mb-4">
        {{ item.name }} <!-- 修正item-name为item.name -->
      </b-col>
    </b-row>
    <template #modal-footer>
      <b-button variant="primary" @click="close">Ok</b-button>
    </template>
  </b-modal>
</template>

<script>
export default {
  props: {
    selectedItems: {
      type: Array,
      default: () => [] // 设置默认空数组，避免undefined报错
    },
  },
  data() {
    return {
      showModal: false,
    };
  },
  methods: {
    show(){
      this.showModal = true;
    },
    close(){
      this.showModal = false;
      // 通过emit事件通知父组件处理数据清空，不直接修改prop
      this.$emit('close');
    }
  },
};
</script>

关键优化点 #

• 严格遵守单向数据流：子组件仅通过$emit触发事件，由父组件修改状态，彻底避免prop修改导致的状态混乱。
• 修复语法错误：修正了prop绑定、插值语法、v-model变量等多处明显错误。
• 提升数据可靠性：利用row-clicked返回的行数据直接赋值，比依赖row-selected的触发顺序更稳定，确保每次点击行都能及时同步数据。
• 数组清空逻辑：父组件通过赋值新空数组this.selectedRows = []替代splice，逻辑更清晰，避免引用类型的意外修改。

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