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>