父组件向子组件传递数组，子组件要修改父组件的值，父组件提供一个修改的方法，子组件自定义一个事件触发调用父组件的方法，数组值修改了，但是页面不能刷新

Question

 <div id='app'>
        <p>父组件中的num为: {{num[1]}}</p>
        <comp :num="num" @fn="changeNum"></comp>
    </div>
    <template id="tmpl">
        <div>
            <h1>{{num[1]}}</h1>
            <button @click="add">按钮</button>
        </div>
    </template>

    <script>
        let comp = {
            template: '#tmpl',
            props: ['num'],
            methods: {
                add() {
                    this.$emit('fn', 10)
                }
            }
        }
        new Vue({
            el: '#app',
            data: {
                num: [10, 20, 30]
            },
            components: {
                comp
            },
            methods: {
                changeNum(val) {
                    console.log(val);
                    this.num[1] += val
                    console.log(this.num);
                }
            }
        })
    </script>

Answer 1

由于 JavaScript 的限制，Vue 不能检测数组和对象的变化。

文档 Vue.js - The Progressive JavaScript Framework https://cn.vuejs.org/v2/guide/reactivity.html#%E5%AF%B9%E4%BA%8E%E6%95%B0%E7%BB%84

// 可修改为
//this.num[1] += val
let newVal = this.num[1] + val;
this.num.splice(1, 1, newVal);

proud-https-6gtz4 - CodeSandbox proud-https-6gtz4 by wittDe using @vue/cli-plugin-babel, vue https://codesandbox.io/s/proud-https-6gtz4?file=/src/App.vue

Answer 2

谢谢