uniapp-父组件数组变化同步子组件视图渲染

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

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

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

 

综上所述，解决方案如下：

 

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

 

还有一种比较好用的就是：  使用key-changing

vue使用key标记组件身份，当key改变时就是释放原始组件，重新加载新的组件。

<template>
  <div>
    <component:key="key"></component>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        key: 0
      }
    },
    methods: {
      changeData() {
        this.key ++; 
      }
    }
  }
</script>