我是 Vue 的新手，希望得到一些關(guān)于最佳實(shí)踐的說明。我正在構(gòu)建一個(gè)使用數(shù)組來保留子組件列表的應(yīng)用程序，我希望能夠通過向父組件發(fā)送來更新和刪除組件。為了實(shí)現(xiàn)這一點(diǎn)，我目前讓孩子檢查父數(shù)組以使用“等于”方法找到它的索引，以便它可以將該索引傳遞給父數(shù)組。這適用于簡單的事情，但如果我的子組件變得更復(fù)雜，我將不得不檢查越來越多的數(shù)據(jù)點(diǎn)以確保我正在更改正確的數(shù)據(jù)點(diǎn)。我能想到的另一種方法是在創(chuàng)建子組件時(shí)為子組件提供一個(gè) ID 道具，然后傳遞它，但隨后我必須處理以確保所有 ID 都不同。我是在正確的軌道上還是有更好的更廣泛接受的方法來做到這一點(diǎn)？我也嘗試過使用 indexOf(this._props) 來獲取索引，但這似乎不起作用。也許我只是做錯(cuò)了什么？這是我正在做的事情的簡化版本：// 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>