vue中van-picker的选项插槽的使用

<van-picker
  :show-toolbar="false"
  :default-index="2" // 默认选中第三行，选中第一行的话，上面会有一段空白，不好看
  :loading="loading"
  :columns="columns" // 一定要绑定数据源
>
  <template #option="item"> // 这里的item就是每一个选项，可以是一个对象也可以是一个字符串
  // 我这里实现的是每一行的选项由id和name组成
  // 切记不要用v-for，会导致数据重复出现在一个选项里
    <van-row>
      <van-col :span="12" class="van-hairline--right">
        <p style="text-align: center">
          {{ item.id }}
        </p>
      </van-col>
      <van-col :span="12" class="van-hairline--left">
        <p style="text-align: center">
          {{ item.name }}
        </p>
      </van-col>
    </van-row>
  </template>
</van-picker>

 <van-popup v-model="sexShow" position="bottom" :style="{ height: '50%' }">
      <van-picker :show-toolbar="true" :columns="columns" ref="getValues" @confirm="onConfirm">
        <template #cancel="item">
          <p>
            性别
          </p>
        </template>
        <template #confirm="item">
          <div class="sexContent">
            <!-- <van-button class="submit">保存</van-button> -->
            <van-button class="submited">保存</van-button>
          </div>
        </template>
        <template #option="item">
          <p style="text-align: center">
            {{item.text}}
          </p>
        </template>
      </van-picker>
    </van-popup>

columns: [{
     text: '男',
       value: 1
     },
     {
       text: '女',
       value: 2
     }],

 onConfirm(value) {
     console.log(value)   //打印的是自己定义的数组对象，然后就可以进行自己的相关操作了
   },

this.$refs.getValues.getValues()