基本展示：
父页面使用子组件如下：
其中，fatherId为向子页面传的参数。
子页面接收参数如下：
props: ['fatherId'],
子页面使用该参数调用方法（注，使用方式不同，发生的问题不同）
getMore() {
console.info(this.fatherId)
},
需求：
当fatherId发生变化时，需要同步更新子页面的fatherId，并使子页面的方法能用正确的参数执行。
问题：
当fatherId发生变化时，子页面的fatherId并未更新。
解决方案：
方案一：
子页面不做更改，父页面增加key属性：:key=“参数名”。
方案二：
父页面不做更改，子页面增加监听事件。
watch: {
//监听props里父页面传的参数的变化
fatherId(val) {
this.fatherId()
}
},
方案三：
父页面调用子页面方法，修改属性。
父页面代码：
getChildMethod(fatherId) {
//参数赋值
this.fatherId= fatherId;
const _this = this
//使用nextTick延迟回调
_this.$nextTick(() => {
_this.$refs.childIndex.getMore() // 调用子页面方法
})
},
说明：“childIndex”为父页面中ref的定义名，“getMore”为子页面的方法名
知识点补充：
1，$refs，用于父组件中访问子组件内部的变量或方法。通过$refs，我们可以获取到子组件的实例，并调用它的方法或修改它的属性。
2，this.$nextTick()，用于延迟回调，主要是用在随数据改变而改变的dom应用场景中，vue中数据和dom渲染由于是异步的，所以，要让dom结构随数据改变这样的操作都应该放进this.$nextTick()的回调函数中。
踩坑记录：
1，调用子页面方法时，括号里传了个参数，直接修改了子页面props里的值，导致浏览器报错。错误示范：
getChildMethod(fatherId) { this.$refs.childIndex.getMore(fatherId) // },
浏览器报错：
2，调用子页面方法时，没有使用this.$nextTick()延迟回调。导致数据每次点击都先保留一次上次的传参值。
参考链接
您阅读本篇文章共花了：
发表评论