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