大家好，又见面了，我是你们的朋友全栈君。
项目问题介绍：父组件中填入各种查询条件，点击查询按钮查出符合条件的数据。其中，数据列表是引入的子组件。第一次加载的时候，子组件数据正常显示，再次查询的时候子组件怎么实现实时更新呢？
解决办法：子组件watch中（监听）父组件数据的变化
以自己的项目为例：
父组件：这是父组件中如何引用的子组件。testParams是我需要传过去的参数对象。参数名是params。
![Vue 父组件向子组件传递动态参数，子组件如何实时更新[通俗易懂]](http://qn.javajgs.com/20220413/664d2c09-76aa-427f-85e2-7a814b10279420220413bd66652e-76ee-4519-a955-ea91bf4c8cad1.jpg)
![Vue 父组件向子组件传递动态参数，子组件如何实时更新[通俗易懂]](https://javaforall.net/wp-content/uploads/2020/11/2020110817443450.jpg)
![Vue 父组件向子组件传递动态参数，子组件如何实时更新[通俗易懂]](http://qn.javajgs.com/20220413/057c2ea0-6a48-40ff-9f2e-b3468f14ad6420220413f6b7bb11-ee4e-4504-a77b-ace06ada3cd51.jpg)
![Vue 父组件向子组件传递动态参数，子组件如何实时更新[通俗易懂]](http://qn.javajgs.com/20220413/2cc160bb-4498-4c39-8610-0f2675d09e78202204131aa9224a-eb16-433c-8070-e45df60ecbac1.jpg)
子组件：子组件通过props接收数据：
![Vue 父组件向子组件传递动态参数，子组件如何实时更新[通俗易懂]](http://qn.javajgs.com/20220413/464042a4-d8e6-45e2-9853-ff48907b226120220413fa3bb1fe-0747-4c6c-aa86-73a1671d0b921.jpg)
子组件中watch监听对象类型的数据
![Vue 父组件向子组件传递动态参数，子组件如何实时更新[通俗易懂]](http://qn.javajgs.com/20220413/142be16d-3b36-4fc3-83fd-c2b697fef41920220413b7c7291e-645e-4f74-899e-ccac506839fe1.jpg)
//immediate表示在watch中首次绑定的时候，是否执行handler，值为true则表示在watch中声明的时候，就立即执行handler方法;值为false，则在数据发生变化的时候才执行handler
这样即可实现父组件动态传递对象参数给子组件，子组件实时更新数据。
初次之外：
watch监听普通类型的数据：
data() {
return {
testParam: 0
}
},
watch: {
testParam(newValue, oldValue) {
console.log(newValue)
}
}
watch监听数组类型的数据：
data() {
return {
testDatas: new Array(8).fill(0)
}
},
watch: {
testDatas: {
handler(newValue, oldValue) {
for (let i = 0; i < newValue.length; i++) {
if (oldValue[i] != newValue[i]) {
console.log(newValue)
this.testFun();//需要执行的方法
}
}
},
deep: true
}
}
亦可参考：https://blog.csdn.net/lbpro0412/article/details/86623611
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/129260.html原文链接：https://javaforall.net
