Question

我有3个组件。它们是dashboard.vue，datatable.vue和modalbody.vue。登录后，我的应用程序到达dashboard.vue。我在哪里呼叫datatable.vue以显示包含props的列表。我在datatable.vue中有一个按钮。如果我点击该按钮，将打开一个模态以添加新记录，以使用datatable.vue添加该列表（modalbody.vue）。

现在我需要在通过模态（datatable.vue）插入新记录后重新加载该列表（modalbody.vue）。

我该怎么做？

Answer 1

我将向您展示一个如何做到的简单示例。希望您能获得逻辑

包含表格的组件：

<template>
    <div>
        <cmp :modal.sync="modal" @personAdded="addItemInTable"></cmp>
        <button @click="addNewPerson">add person</button>
        <table>
            <tr v-for="row in tableRows">
                <td>{{ row.name }}</td>
                <td>{{ row.lastName }}</td>
            </tr>
        </table>
    </div>
</template>
<script>
    import childComponent from 'ChildComponent.vue'
    export default {
        components: {
            "cmp": childComponent
        },
        data() {
            return {
                modal: false,
                tableRows: [
                    { name: "person1", lastName: "lperson1" },
                    { name: "person2", lastName: "lperson2" },
                    { name: "person3", lastName: "lperson3" },
                    { name: "person4", lastName: "lperson4" },
                ]
            }
        },
        methods: {
            addNewPerson() {
                this.modal = true //open the modal
            },
            addItemInTable(data) {
                //saving the data passed from modal
                this.tableRows.unshift(data)
                this.modal = false
            }
        }
    }
</script>

模态组件：

<template>
    <div id="modal" v-if="modal">
        <input type="text" v-model="name">
        <input type="text" v-model="">
        <button @click="save">Save</button>
        <button @click="cancel">Cancel</button>
    </div>
</template>
<script>
    export default {
        props: {
            modal: {
                default: false
            }
        },
        data() {
            return {
                name: '',
                lastName: ''
            }
        },
        methods: {
            save() {
                const savedData = {
                    name: this.name,
                    lastName: this.lastName
                }

                this.$emit('personAdded', savedData)
            },
            cancel() {
                this.$emit('update:modal', false)
            }
        }
    }
</script>
<style>
    .modal {
        position: absolute;
        height: 500px;
        width: 500px;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 999;
    }
</style>

我没有运行上面的代码，但逻辑是正确的。请阅读以下内容以了解：

对于.sync修饰符，请阅读this
对于发出事件（$ emit），请阅读this
重新使用组件阅读this

重新加载组件

1 个答案: