javascript - Vue.js:未重新渲染子组件

Question

我正在努力思考 props 是如何传递给子组件的，以及它们是如何从那里更新的。

// parent.vue
<template>
    <div>
        <div v-for="elem in getCurrentArray">
            <child-component :elem="elem"></child-component>
        </div>
        <button @click.prevent="currentIdx--">Prev</button>
        <button @click.prevent="currentIdx++">Next</button>
    </div>
</template>
<script>
    export default {
        components : {
            ChildComponent
        },
        data(){
            return {
                arr : [ ["A", "B", "C" ], [ "D", "E" ]], // this would be populated from vue store
                currentIdx : 0
            }
        },
        computed : {
            getCurrentArray(){
                return this.arr[this.currentIdx]
            }
        },
    }
</script>

// child.vue
<template>
    <div>Prop: {{elem}} <input type="text" v-model="myinput" @blur="save" /></div>
</template>
<script>
    export default {
        props : [ "elem" ],
        data(){
            return {
                myinput : this.elem
            }
        },
        methods : {
            save(){
               // this.$store.dispatch("saveChildElement", { myinput }
            }
        },
        mounted(){ console.log( this.elem + " being rendered" ) }
    }
</script>

在这个例子中，我有两组数组 ['A','B','C'] 和 ['D','E']。在页面加载时，第一组通过子组件呈现。

看起来不错。但是，当我单击下一步转到第二组时，我得到以下信息:

因此，在正确传递 props 的同时，文本框输入值不会更新。当我检查 console.log 时，很明显 vue 不会为“D”和“E”重新渲染子组件。相反，它只是使用“A”和“B”的现有组件。

有没有办法强制vue重新渲染组件？如果不是，我如何确保文本框输入获得最新的 Prop 值？请记住，我希望能够通过 vue store 保存对输入值的更改。

Answer 1

按照cool-man的说法添加一个 key ，它会解决问题。

但是，您对组件重新渲染的检查存在缺陷，您使用了子安装生命周期，并且因为您看到它仅在您认为组件没有重新渲染时才运行。但这是错误的。 "mounted"在一个组件生命周期中只发生一次，因为你对 ['A','B','C'] 使用相同的组件然后 ['D','E'] vue 不知道重新创建组件并使用新 Prop 简单地重新渲染它们。