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

全栈程序员-站长 • 2022年4月13日下午7:40 • 未分类 • 阅读 257

项目问题介绍：父组件中填入各种查询条件，点击查询按钮查出符合条件的数据。其中，数据列表是引入的子组件。第一次加载的时候，子组件数据正常显示，再次查询的时候子组件怎么实现实时更新呢？解决办法：子组件watch中（监听）父组件数据的变化以自己的项目为例：父组件：这是父组件中如何引用的子组件。testParams是我需要传过去的参数对象。参数名是params。子组…

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

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

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

以自己的项目为例：

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

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

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

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

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们举报，一经查实，本站将立刻删除。

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

赞 (0)

全栈程序员-站长

0 0

mysql基本操作_MySQL创建数据库表

mysql基本操作_MySQL创建数据库表1、数据库简单来说，所谓的数据库就是存储数据的容器，而且是永久存储的。2、为什么需要数据库3、为什么要学习MySQL数据库最早MySQL数据，瑞典AB公司开发的一款开源型的关系型数据库。随着时间的推移，瑞典AB公司把MySQL数据库转让给Sun公司（Java语言的创始公司）后来，Sun公司经营不善，又把MySQL数据库转让给甲骨文公司（Oracle数据库）4、数

全栈程序员-站长
2022年10月6日
3
拦截器,过滤器,监听器执行顺序(被拦截个人过滤器)

拦截器（Interceptor）和过滤器（Filter）的执行顺序和区别

全栈程序员-站长
2022年4月12日
261
ExtJS学习———–Ext.Array，ExtJS对javascript中的Array的扩展

ExtJS学习———–Ext.Array，ExtJS对javascript中的Array的扩展

全栈程序员-站长
2022年1月22日
36
onbeforeunload事件_pageload事件何时触发

onbeforeunload事件_pageload事件何时触发beforeunload事件简介当窗口，文档及其资源即将卸载时，将触发该事件。该文档仍然可见，此时事件仍可取消。如果为returnValueEvent属性分配了一个字符串，则会出现一个对话框，要求用户确认离开该页面（参见下面的示例）。IE浏览器在对话框中显示返回的字符串，但其他浏览器会显示自己的消息。如果未提供任何值，则以静默方式处理事件。注意：为了防止不需要…

全栈程序员-站长
2025年8月16日
4
A-KAZE论文研读

A-KAZE论文研读AKAZE是KAZE的加速版本。KAZE在构建非线性空间的过程中很耗时，在AKAZE中将FastExplicitDiffusion(FED)加入到金字塔框架可以dramaticallyspeed-up。在描述子方面，AKAZE使用了更高效的ModifiedLocalDifferenceBinary(M-LDB)，可以从非线性空间中利用梯度信息gradientinformation。M…

全栈程序员-站长
2022年6月24日
23
零起点学习Drupal教程[第一章—引言]

零起点学习Drupal教程[第一章—引言]文章摘自http://www.rzchina.net/forum/6第一章引言1.1什么是drupal？Drupal究竟是什么呢？下面是Drupal官方网站给出的定义：“Drupal软件允许个人或用户社区轻松地发布、管理和组织Web站点上的各种内容。”Drupal是一个免费的、开源的、具有模块化框架使用PHP开发的网站内容管理系统。Drupal允许网站管理员创建和组织网站内容、定制

全栈程序员-站长
2022年6月13日
27

发表回复

关注全栈程序员社区公众号