因为父组件和子组件的数据单向绑定关系,子组件中的数据并不是从父组件中获取的而是通过props传递的。因此只更新父组件的数据不会自动更新子组件中的数据。
需要在子组件中通过watch监听num的变化,将最新的值传递给变量,从而更新展示。
点击清空button会把num重新赋值,自动触发watch监听函数,并将最新的值传递给子组件,从而实现了双向绑定的效果
<template>
<div>
<child :mounted="num"></child>
<button @click="clearMounted">清空</button>
<div>
</template>
<script>
data() {
num: 1,
},
methods: {
clearMounted() {this.num = null;}
},
</script>
<template>
<div>
<div @click="value+1">功德 +{{value}}</div>
</div>
</template>
<script>
export deafult {
props: {
num: Number
},
watch: {
num(newVal) {
this.value = newVal;
}
},
mounted: {
this.value = num;
},
data() {
return {
}
},
}
</script>
标签:vue,watch,value,newVal,num,更新,组件
From: https://blog.51cto.com/u_15694202/7542712