uview2如何将时间地址选择器u-picker底部弹窗主体选择部分抽离出为一个页面？

<template>
  <view>
    <!-- 这里可以放一些其他的内容 -->
    <button @click="goToPickerPage">打开选择器</button>
    <u-picker>
      <template>
        <slot></slot> <!-- 在这里插入选择器的内容 -->
      </template>
    </u-picker>
  </view>
</template>
<script>
  export default {
    methods: {
      goToPickerPage() {
        uni.navigateTo({
          url: '/pages/pickerPage' // 跳转到新页面
        })
      }
    }
  }
</script>

<template>
  <view>
    <!-- 这里放选择器的内容 -->
  </view>
</template>
<script>
  export default {}
</script>

<template>
  <u-picker></u-picker>
</template>
<script>
  import { UPicker, UPickerColumn, UPickerColumnItem } from 'uview-ui'
  export default {
    components: {
      UPicker,
      UPickerColumn,
      UPickerColumnItem
    },
    data() {
      return {
        // 设置u-picker的属性和事件
        pickerValue: []
      }
    }
  }
</script>

<template>
  <view>
    <!-- 这里可以放一些其他的内容 -->
    <button @click="showPicker">打开选择器</button>
    <picker-content v-if="isPickerVisible" @confirm="handlePickerConfirm"></picker-content>
  </view>
</template>
<script>
  import PickerContent from './PickerContent.vue'
  export default {
    components: {
      PickerContent
    },
    data() {
      return {
        isPickerVisible: false
      }
    },
    methods: {
      showPicker() {
        this.isPickerVisible = true
      },
      handlePickerConfirm(value) {
        // 处理选择器确认事件
        console.log(value)
        this.isPickerVisible = false
      }
    }
  }
</script>