zoukankan      html  css  js  c++  java
  • uniapp-父组件数组变化同步子组件视图渲染

    项目中子组件封装的是一个picker,父组件需要传数组到子组件中。

    如果父组件的数组出现变更,视图中的子组件或许不能直接刷新渲染,需要反复弹起几下才能看到。

    试过深度监听,但都没有用,ref也不知道为啥调不动,我这边使用子组件时外面还有个循环。

    综上所述,解决方案如下:

    $nextTick():等之前dom视图数据渲染完成后再执行回调函数

    1、添加一个变量isShowArr来判断是否显示该子组件

    2、当数组变化后调用$nextTick方法来重新渲染子组件的内容

    视图层:

            <view class="rt" v-if="agencyArr.length > 0 && isShowArr">
                <pk-select :arr="agencyArr[index]" :atIndex="agencyArr[index].indexOf(agencyArr[index].find(x => x.id == item.agency_id))" keyIndex="name" @change="changeSelect($event,index,4)"></pk-select>
            </view>

    控制层:

            //当数组的值变更后
            _self.agencyArr = arr;
            _self.isShowArr = false;
            _self.$nextTick(() => {
                _self.isShowArr = true;
            })

    以此类推,除了基本数据类型可以试试监听属性,其余类型可以考虑 v-if 加 $nextTick 这个条件判断使dom重新渲染。

  • 相关阅读:
    多线程02
    多线程01
    CSS
    Mybatis CRUD中万能Map的用法及优势
    Tomcat配置
    Node.js+Vue+Webpack
    Java的几种常见排序算法
    maven插件 mybatis逆向工程
    ssm依赖
    mybatis spring整合依赖配置
  • 原文地址:https://www.cnblogs.com/nanyang520/p/12407778.html
Copyright © 2011-2022 走看看