vue中父子组件执行的生命周期
1. 父组件获得请求数据,通过prop向子组件传值 ------ 父传子
问题表述:
组件化开发中经常用到父子组件的通信,如果父组件的数据是发请求从后端获取的异步数据,那么父组件将这个数据传递给子组件的时候。 因为是异步数据,所以会出现父组件传递过去了,但是子组件mounted钩子初始情况下接受不到数据。
解决办法
// 子组件中添加监听
props: {
msg: {
type: Object,
default: () => {}
}
},
watch: {
// 监听到父组件传递过来的数据后,加工一下,
// 存到data中去,然后在页面上使用
msg(newnew, oldold) {
console.log("监听", newnew, oldold);
this.editMsg = "---" + newnew + "---";
},
},
复习下父子组件的生命周期
父 beforeCreate
父 created
父 beforeMount
子 beforeCreate
子 created
子 beforeMount
子 mounted
父 mounted
watch的执行时机
watch最初绑定不立即执行,等到值改变后才执行,正常是computed之后执行
如果加了属性immediate:true 则在最初绑定就执行,此时在beforecreate 和 created之间执行
deep属性监听对象内部的改变,无论多深都可以监听到
子组件中定义表单,父组件调用子组件的校子传验 ----- 父传子
- 子组件定义validate函数
- 父组件利用
this.$refs.xxx.validate((valid, res) => {})
调用,对子组件数据进行校验,并获得子组件传递的值 (利用回调函数传值) - 注意:子组件要通过ref绑定
// 子组件中
validate(callback) {
this.$refs.formModule.validate((valid) => {
callback(valid, this.formModule); // 将写好的数据传递给父组件, valid校验字段,数据
});
},
// 父组件
this.$refs.unifyForm.validate((valid, res) => {
if (valid) {
this.$message({
showClose: true,
message: "保存数据成功!",
type: "success",
});
this.formData = Object.assign(this.formData, res);
// 发送后端请求
console.log(this.formData, "保存数据");
}
});