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

Question

我是 Vue 的新手，希望得到一些关于最佳实践的说明。我正在构建一个使用数组来保留子组件列表的应用程序，我希望能够通过向父组件发送来更新和删除组件。为了实现这一点，我目前让孩子检查父数组以使用“等于”方法找到它的索引，以便它可以将该索引传递给父数组。这适用于简单的事情，但如果我的子组件变得更复杂，我将不得不检查越来越多的数据点以确保我正在更改正确的数据点。我能想到的另一种方法是在创建子组件时为子组件提供一个 ID 道具，然后传递它，但随后我必须处理以确保所有 ID 都不同。我是在正确的轨道上还是有更好的更广泛接受的方法来做到这一点？我也尝试过使用 indexOf(this._props) 来获取索引，但这似乎不起作用。也许我只是做错了什么？这是我正在做的事情的简化版本：// fake localStorage for snippet sandboxconst 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 

  v-for="(child, index) in children"

  :key="index"

  :name="child.name"

  @update-child="updateChild(child, $event)"

/>

updateChild(child, newName) {

  child.name = newName

}

您需要从子组件发出的只是新名称，它将作为事件有效负载呈现$event

update() {

  this.$emit("update-child", this.newName)

}

关于:key...的快速注释肯定会更好地键入child对象的某些独特属性（如id您所建议的那样）。

如果您的数组仅改变大小，则可以键入数组索引，但如果您决定拼接或排序它，Vue 将无法正确响应该更改，因为索引永远不会改变。