(mpvue)微信小程序 picker-view 單列時的value值

在自定義彈層組件的時候，有時會需要從外層傳value值給組件，來設置picker-view的默認值，這時候應該是這樣設置：

//外層
<my-picker :defaultArr="[index]" ... ></my-picker>
...
data(){
  index: 1   //索引變量
}

　　

//組件內：
<picker-view :value="defaultArr" ... >
...
</picker-view>
...
props: {
  defaultArr: {
    type:  Array
  }  
}

　　

而不是：

//外層

<my-picker :defaultIndex="1" ... ></my-picker>

　　

//組件內：
<picker-view :value="[defaultIndex]" ... >
...
</picker-view>
...
props: {
  defaultIndex: {
    type:  Number
  }  
}

　　

提示：

        這種由外部傳默認索引值的情況，需要組件通過 v-if 來控制顯示隱藏，value才會有效果。而這時，如果只是傳一個常量進去的話，每次打開彈層都會顯示默認索引對應的選項，無論是否有選擇其他選項。所以需要以 [ 變量 ] 的形式傳值，這樣當變量改變時，默認顯示值value也會跟着變。當頁面重新初始化，這個變量會被重新初始化，恢復需要的默認值。不過由於mpvue的頁面關閉之后並沒有銷毀，所以除了第一次外都需要自己手動重新初始化數據，這點請注意。（上述變量是指選中選項索引）

        另外，是 value 根據該變量的值改變，而不是該變量會根據value的值變化，請清楚這一點。

 

注意：

1. “...”代表省略代碼，這里只展示關鍵部分代碼，並非完整的例子。

2.這例子是用mpvue中的語法，並非原生微信小程序的語法，僅供參考。