Vue 父组件向子组件传递动态参数，子组件如何实时更新[通俗易懂]

全栈程序员-用户IM • 2022年4月13日下午7:40 • 未分类

大家好，又见面了，我是你们的朋友全栈君。

项目问题介绍：父组件中填入各种查询条件，点击查询按钮查出符合条件的数据。其中，数据列表是引入的子组件。第一次加载的时候，子组件数据正常显示，再次查询的时候子组件怎么实现实时更新呢？

解决办法：子组件watch中（监听）父组件数据的变化

以自己的项目为例：

父组件：这是父组件中如何引用的子组件。testParams是我需要传过去的参数对象。参数名是params。

Vue 父组件向子组件传递动态参数，子组件如何实时更新[通俗易懂]

子组件：子组件通过props接收数据：

Vue 父组件向子组件传递动态参数，子组件如何实时更新[通俗易懂]

子组件中watch监听对象类型的数据

Vue 父组件向子组件传递动态参数，子组件如何实时更新[通俗易懂]

//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

发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/129260.html原文链接：https://javaforall.cn

【正版授权，激活自己账号】： Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛

【官方授权正版激活】： 官方授权正版激活支持Jetbrains家族下所有IDE 使用个人JB账号...