微信小程序 van-picker 结合 van-popup 弹出选择项目 组件 picker-item

<van-cell required title="所属单位" value="{{HosName}}" is-link bind:click="showPopup">
</van-cell>
<van-toast id="van-toast" />
<van-popup show="{{ show }}" position="bottom" bind:close="onClose">
<van-picker
  show-toolbar
  title="标题"
  columns="{{HosList}}"
  bind:cancel="onCancel"
  bind:confirm="onConfirm"
/>
</van-popup>
<slot></slot>

index.wxml

// components/component.js
Component({
  /**
   * 组件的属性列表
   */
  options: {
    multipleSlots: true // 在组件定义时的选项中启用多slot支持
  },
  properties: {
    HosName: {
      type: String,
      value: '111'
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    HosList: ['111', '222', '333', '444', '5555'],
    show: false
  },
  lifetimes: {
    // 组件的生命周期函数，用于声明组件的生命周期
    attached: () => { },
    moved: () => { },
    detached: () => { }
  },
  pageLifetimes: {
    // 组件所在页面的生命周期函数
    show: () => {
      
     },
    hide: () => { }
  },
  /**
   * 组件的方法列表
   */
  methods: {
    showPopup() {
      this.setData({ show: true });
    },
    onConfirm(event) {
      // const { picker, value, index } = event.detail;
      //Toast(`当前值：${value}, 当前索引：${index}`);
      this.setData({ HosName: event.detail.value, show: false });
      var val = event.detail.value; //通过这个传递数据
      var myEventDetail = {
        val: val
      }
      this.triggerEvent('myevent', myEventDetail);
    },
    onCancel() {
      this.setData({ show: false });
    },
    onClose() {
      this.setData({ show: false });
    }
  }
})

index.js

{
  "usingComponents": {},
  "component": true
}

引用组件

 

<picker-item id="myComponent" bind:myevent="onGetCode"></picker-item>

 

{{HosName}}

组件传值：

父页面定义 HosName

onGetCode: function (e) {

this.setData({

HosName: e.detail.val

})

}