Vue3组件如何通过defineProps传递并显示当前日期时间？

问题根源 #

你直接写 dateandtime="new Date().toLocaleString()" 时，Vue 会把它当作普通字符串传递，不会执行这个 JavaScript 表达式，自然拿不到正确的日期时间值。必须用 v-bind（简写为冒号 :）绑定表达式，才能让 Vue 执行代码并传递结果。

完整解决方案 #

1. 子组件（Header.vue）代码 #

保留你的 props 定义，同时在模板中渲染接收的值：

<script setup>
// 定义 props，指定类型和可选默认值
const props = defineProps({
  dateandtime: {
    type: String,
    // 可选：父组件未传值时，默认显示当前时间
    default: () => new Date().toLocaleString()
  }
})
</script>

<template>
  <header>当前日期时间：{{ dateandtime }}</header>
</template>

2. 父组件调用方式 #

用冒号绑定表达式，传递实时的日期时间结果：

<template>
  <!-- 用 :dateandtime 绑定表达式，执行并传递日期时间值 -->
  <Header :dateandtime="new Date().toLocaleString()" />
</template>

<script setup>
import Header from './components/Header.vue' // 注意路径需匹配你的项目结构
</script>

进阶：实现实时更新时间 #

如果需要每秒刷新日期时间，在父组件中用定时器配合 ref 实现：

<template>
  <Header :dateandtime="currentTime" />
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import Header from './components/Header.vue'

const currentTime = ref(new Date().toLocaleString())
let timer = null

onMounted(() => {
  // 每秒更新一次时间
  timer = setInterval(() => {
    currentTime.value = new Date().toLocaleString()
  }, 1000)
})

onUnmounted(() => {
  // 组件销毁时清除定时器，避免内存泄漏
  clearInterval(timer)
})
</script>

内容的提问来源于stack exchange，提问作者boui3ado