在开发uniapp项目中,刚上手时对项目不熟悉,碰到一个坎就是如何二次封装u-picker,话不多说,上干货。
子组件
<u-picker
:show="value"
:column="column"
:keyName="keyName"
>
</u-picker>
<script>
export default{
props:{
value: {
type: Boolean,
default:false,
},
column: {
type:Array
},
keyName: {
type: String,
}
}
}
</script>
父组件
<uPicker :value="showPicker" :column="column" :keyName="keyName" />
<script>
data(){
showPicker:false,
column:[],
keyName: '',
address: [
{
keyName: '北京'
}
]
}
methods:{
openShow(){
this.column = []
this.showPicker = false
// 这里要注意 因为column是二维数组的展示 只需将他push到this.column中就行了 重要的是多次push时,先定义一个全局对象为空数组,不然会把之前的数据放在一起。
this.column.push(this.address)
}
}
</script>