vue页面上有个时间选择器如何实现选择时间就传给所有页面这个时间

要在Vue页面中实现一个时间选择器，并将其选择的时间传递到所有页面，你可以采取以下步骤：

1. **安装和配置**:
首先，你需要安装一个日期时间选择插件，如`vue2-datepicker` 或 `element-ui` 的 `el-date-picker`。安装完成后，在项目中导入并配置。

// 如果使用vue2-datepicker
npm install vue2-datepicker --save
import DatePicker from 'vue2-datepicker'

// 如果使用element-ui
npm install element-plus -S
import { ElDatePicker } from 'element-plus'

2. **创建时间选择器组件**:
创建一个自定义的时间选择器组件，将选中的时间作为props传递给它。

<!-- 使用vue2-datepicker -->
<template>
  <div>
    <DatePicker v-model="selectedTime" @change="handleTimeChange"></DatePicker>
  </div>
</template>

<script>
export default {
  props: {
    timeProp: {
      type: String,
      // 默认值可以根据需求设置
      default: ''
    }
  },
  data() {
    return {
      selectedTime: this.timeProp || ''
    };
  },
  methods: {
    handleTimeChange(date) {
      this.$emit('update:timeProp', date.format('YYYY-MM-DD HH:mm:ss')); // 格式化后传递
    }
  }
};
</script>

<!-- 或者使用element-ui -->
<template>
  <ElDatePicker v-model="selectedTime" @change="handleTimeChange"></ElDatePicker>
</template>

<script>
export default {
  props: {
    timeProp: {
      type: String,
      // ...
    }
  },
  data() {
    return {
      selectedTime: this.timeProp || ''
    };
  },
  methods: {
    handleTimeChange(date) {
      this.$emit('input', date.format('yyyy-MM-dd HH:mm:ss')); // 直接传递原始值
    }
  }
};
</script>

3. **在其他页面使用该组件**:
在需要展示或使用选择时间的页面上，通过props接收时间并显示：

<!-- 子组件在父组件里 -->
<YourCustomTimePicker :timeProp.sync="globalSelectedTime" />

<!-- 父组件 -->
<template>
  <div>
    <h1>当前选择的时间: {{ globalSelectedTime }}</h1>
    <!-- ... 其他内容 -->
  </div>
</template>

<script>
import YourCustomTimePicker from './components/YourCustomTimePicker.vue';

export default {
  components: {
    YourCustomTimePicker
  },
  data() {
    return {
      globalSelectedTime: ''
    };
  }
};
</script>

现在，当你在时间选择器中选择时间时，`globalSelectedTime` 将自动更新并在所有父级组件中同步显示。如果你有多个页面都需要共享这个时间，可以在它们之间传递这个prop。