在 Vue 中更新父数组中的子组件的正确方法是什么？

Question

我是 Vue 的新手，希望得到一些关于最佳实践的说明。

我正在构建一个使用数组来保留子组件列表的应用程序，我希望能够通过向父组件发送来更新和删除组件。为了实现这一点，我目前让孩子检查父数组以使用“等于”方法找到它的索引，以便它可以将该索引传递给父数组。这适用于简单的事情，但如果我的子组件变得更复杂，我将不得不检查越来越多的数据点以确保我正在更改正确的数据点。我能想到的另一种方法是在创建子组件时为子组件提供一个 ID 道具，然后传递它，但随后我必须处理以确保所有 ID 都不同。

我是在正确的轨道上还是有更好的更广泛接受的方法来做到这一点？我也尝试过使用 indexOf(this._props) 来获取索引，但这似乎不起作用。也许我只是做错了什么？

这是我正在做的事情的简化版本：

// fake localStorage for snippet sandbox

const localStorage = {}

Vue.component('child', {

    template: '#template',

    data() {

        return {

            newName: this.name

        }

    },

    props: {

        name: String

    },

    mounted() {

        this.newName = this.name

    },

    methods: {

        update() {

            this.$emit(

                "update-child",

                this.$parent.children.findIndex(this.equals),

                this.newName

            )

        },

        equals(a) {

            return a.name == this.name

        }

    }

})

var app = new Vue({

    el: '#app',

    data: {

        children: []

    },

    methods: {

        addNewChild() {

            this.children.push({

                name: 'New Child',

            })

        },

        updateChild(index, newName) {

            this.children[index].name = newName

        }

    },

    mounted() {

        if (localStorage.children) {

            this.children = JSON.parse(localStorage.children)

        }

    },

    watch: {

        children(newChildren) {

            localStorage.children = JSON.stringify(newChildren)

        }

    }

})

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>

<div id="app">

    <button v-on:click="addNewChild">+ New Child</button>

    <hr />

    <child v-for="child in children"

        :key="children.indexOf(child)"

        :name="child.name"

        @update-child="updateChild">

    </child>

</div>

<script type="text/x-template" id="template">

    <div>

        <p><b>Name: {{name}}</b></p>

        <input placeholder="Name" type="text" v-model="newName" />

        <button @click="update">Update</button>

        <hr />

    </div>

</script>

Answer 1

最棒的v-for是它创建了自己的范围。考虑到这一点，您可以安全地child在事件处理程序中引用。例如<child&nbsp;&nbsp; v-for="(child, index) in children"&nbsp; :key="index"&nbsp; :name="child.name"&nbsp; @update-child="updateChild(child, $event)"/>updateChild(child, newName) {&nbsp; child.name = newName}您需要从子组件发出的只是新名称，它将作为事件有效负载呈现$eventupdate() {&nbsp; this.$emit("update-child", this.newName)}关于:key...的快速注释肯定会更好地键入child对象的某些独特属性（如id您所建议的那样）。如果您的数组仅改变大小，则可以键入数组索引，但如果您决定拼接或排序它，Vue 将无法正确响应该更改，因为索引永远不会改变。