如何在 Bootstrap Vue 中将模态数据发送给父级？

Question

我是 Vue 和 Bootstrap Vue 的新手。我构建了一个使用 API 数据数组的表。<b-modal>该表有一个在子组件中打开的按钮。该模式具有三个字段，通过单击按钮将数据附加到表的数组中。然后该表会更新。到这里为止就好了。问题是：当我尝试从 推送更多信息时<b-modal>，我之前从 添加的信息<b-modal>在数组和表中都被修改。从API带来的信息没有被修改。怎么了？多谢。Vue.component('modal', {    props:['commodity_data'],    template:/*html*/`        <div>                        <b-modal id="addModal" ref="modal" hide-footer title="Add Commodity">                <b-form-group>                    <label>                    Hu Count                        <b-form-input                            id="hu_count"                            v-model="new_row.hu_count"                            >                        </b-form-input>                    </label>                    <label>                    Dimensions                        <b-form-input                            id="dimensions"                            v-model="new_row.dimensions"                            >                        </b-form-input>                    </label>                    <label>                    Weight                        <b-form-input                            id="weight"                            v-model="new_row.weight"                            >                        </b-form-input>                    </label>                </b-form-group>            <b-button variant="success" @click="addRow">Add Row</b-button>         </b-modal>        </div>    `,    data(){        return{            new_row:            {                dimensions: '',                hu_count: '',                weight: '',            }        }    },    methods:{        addRow: function () {                        this.commodity_data.push(this.new_row)            this.$refs.modal.hide()            console.log(this.commodity_data);        }    }})

Answer 1

有两个问题：1）我们永远不应该修改子组件中的 props，2）添加数据时，每次都添加子数据的相同引用。

固定孩子

不是修改 prop，而是$emit使用克隆子数据的事件：

addRow() {

   this.$emit('add', { ...this.new_row });  

   this.$refs.modal.hide()

}

^{扩展运算符创建浅表副本。}

修复父级

现在，孩子发出了一个父母应该监听的事件。在子标签上创建监听器：

<modal id="addModal" @add="addData" :commodity_data="commodity_data"></modal>

并创建处理程序方法（在父级中）：

addData(data) { 
  this.commodity_data.push(data);
}