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重新渲染。

  • 相关阅读:
    Sum Root to Leaf Numbers
    Sum Root to Leaf Numbers
    Sort Colors
    Partition List
    Binary Tree Inorder Traversal
    Binary Tree Postorder Traversal
    Remove Duplicates from Sorted List II
    Remove Duplicates from Sorted List
    Search a 2D Matrix
    leetcode221
  • 原文地址:https://www.cnblogs.com/nanyang520/p/12407778.html
Copyright © 2011-2022 走看看