因为父组件和子组件的数据单向绑定关系,子组件中的数据并不是从父组件中获取的而是通过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>