vue中父子组件传值问题(深度监听)

vue中父子组件传值问题

普通的父子组件通常都是在子组件中绑定某个属性，在子组件中用props接收，子组件通过$emit将值传递给父组件。父组件通过$emit传递的函数和值来得到子组件的值。

// 父组件中，子组件的写法
// id 是要传递到子组件的值
<subCompont @hideHandle="drawerHide" :id="id"></subCompont>

// 子组件接收从父组件传来的值
props: {   // 或者简单写法 props:["id"]
	id: {
		type: [Number,String],
         default: 0
    }
}
// 子组件中向父组件提交值
this.$emit('hideHandle', false)

//watch监听值是否接收到传来的值，当接收到时执行某函数
watch: {
	id (val) {
		this.xxx(val) // 当监听到传来的值得时候执行此函数
	}
}

// 父组件接收从子组件传来的值
// 上面的hiedHandle看到没有，$emit就是向这个绑定的属性传值的，drawerHide会接收传来的值
drawerHide (val) {
	// val表示传来的值
	console.log(val)
}

通常我们父子组件传值并不只是需要这个值，而是需要这个值得同时进行一些操作。我们一般通过watch监听传来的值，如果值传来了，将执行watch中的操作。

watch:{
	'id': (val) => {
        this.xxxx(val)
    }
}

watch:{
	id: (val) => {
        this.xxxx(val)
    }
}

watch:{
	id (val) {
        this.xxxx(val)
    }
}

但是我就比较倒霉了，我遇到了监听不到的情况，因此遇到的深度监听

watch:{
	id: {
		deep: true,// 深度监听
		handler (val) { // 监听到后执行handler方法
			this.xxx(val)
		}
	}
}

这样确实解决了一部分问题，但是更倒霉的是我还遇到了，第一次监听不到的情况

watch:{
	id: {
		deep: true, // 深度监听
		immediate: true, // 监听到后，立即执行 handler方法
		handler (val) {
			this.xxx(val)
		}
	}
}

这样就基本覆盖了所有父子组件传值的时候watch监听不到的情况了