vue watch的监听-CFANZ编程社区

以前一直不知道watch如何应用到具体场景中，这几天经过项目，终于理清来它的具体用法。当祖先组件触发执行方法，引起数据变化时候都可以让子组件监控到接收到的数据的变化

<component1 @click="changeVal">
<component2 :val="val"  />
<compment1>
<script >
export default {
data() {
return{
  val:"test"
  }
},
methods: {
  changeVal () {
  this.val="test2"
  }
}
}
</script>

<component2 >
<component3  :val="val"  />
<compment2>
<script >
export default {
props: {
  val: {
  type: String,
  default: ' '
  }
}
}
</script>


<component3 />
<script >
export default {
props: {
  val: {
  type: String,
  default: ' '
  }
},
watch: {
val:(newval){
  console.log(val)  //val=test2
  //执行其他方法
}
}
methods: {

  clickHandler (args) {
  this.$emit('clickHandler1', args) //args要传的参数
  }
}
}
</script>

通过props属性把数据往子组件中传递，然后下面的子组件根据watch的监听，根据变化执行相应的方法