vue2中父子组件通过props传递数据，父组件数据ajax异步更新，子组件数据不更新的问题解决

解决方案1在子组件中，watch监听props的动态值，设置deep的属性值为true（vue2官方文档中解释为：深度监听，每次属性值发生变化时，都会监听到）。在handler中执行子组件想处理数据的方法。解决方案2分析：父子组件的生命周期顺序为：父beforeCreate - 父 created - 父beforeMounted-子beforeCreate - 子created - 子befo

wangyinze123

2762人浏览 · 2020-12-03 21:20:42

wangyinze123 · 2020-12-03 21:20:42 发布

在这里插入图片描述

解决方案1

在子组件中，watch监听props的动态值，设置deep的属性值为true（vue2官方文档中解释为：深度监听，每次属性值发生变化时，都会监听到）。在handler中执行子组件想处理数据的方法。
在这里插入图片描述

解决方案2

在这里插入图片描述

分析： 父子组件的生命周期顺序为：父beforeCreate - 父 created - 父beforeMounted-子beforeCreate - 子created - 子beforeMounte - 子mounted 父 mounted 。当父组件中mounted通过异步请求的时候获取数据给子组件，此时子组件的mounted已经执行完毕，所以在子组件中获取父组件的props为undefined

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^