Vue 父组件向子组件传递动态参数,子组件如何实时更新
项目问题介绍:父组件中填入各种查询条件,点击查询按钮查出符合条件的数据。其中,数据列表是引入的子组件。第一次加载的时候,子组件数据正常显示,再次查询的时候子组件怎么实现实时更新呢?解决办法:子组件watch中(监听)父组件数据的变化以自己的项目为例:父组件:这是父组件中如何引用的子组件。testParams是我需要传过去的参数对象。参数名是params。子组...
项目问题介绍:父组件中填入各种查询条件,点击查询按钮查出符合条件的数据。其中,数据列表是引入的子组件。第一次加载的时候,子组件数据正常显示,再次查询的时候子组件怎么实现实时更新呢?
解决办法:子组件watch中(监听)父组件数据的变化
以自己的项目为例:
父组件:这是父组件中如何引用的子组件。testParams是我需要传过去的参数对象。参数名是params。
子组件:子组件通过props接收数据:
子组件中watch监听对象类型的数据
//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
更多推荐
所有评论(0)