vue watch的监听

以前一直不知道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的监听，根据变化执行相应的方法