父组件向子组件传递数组，子组件要修改父组件的值，父组件提供一个修改的方法，子组件自定义一个事件触发调用父组件的方法，数组值修改了，但是页面不能刷新
问题描述：
<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>
答
由于 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);