(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中的语法，并非原生微信小程序的语法，仅供参考。