如何在 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); }