项目开发日志:Uniapp中如何将uview中的u-picker二次封装

393 阅读1分钟

在开发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>