如何在Vue 3组合式API中为消息提示组件设置SetTimeout？

问题分析 #

你当前代码存在两个核心问题：

1. 用const声明的msg是常量，无法在setTimeout中重新赋值，必须使用Vue的响应式API声明变量。
2. 把定时逻辑放在父组件不够优雅，组件的显示隐藏逻辑应该封装在组件内部，提升复用性。

方案一：修正父组件响应式变量 #

将msg改为响应式的ref变量，才能在定时器中修改值：

<script setup>
import { ref } from 'vue'
import MsgAlerts from './Message.vue'

// 用ref声明响应式变量
const msg = ref('Produto cadastrado com sucesso!') 

setTimeout(() => {
  // ref变量需通过.value修改值
  msg.value = "" 
}, 3000)
</script>

<template>
  <MsgAlerts :msg="msg" v-show="msg" />
</template>

方案二：封装定时逻辑到子组件（推荐） #

让Message组件自己控制显示隐藏，父组件只需传递消息即可：

修改后的Message组件：

<script setup>
import { ref, onMounted } from 'vue'

const props = defineProps({
  msg: String,
  // 可选：支持自定义隐藏时长，默认3秒
  duration: {
    type: Number,
    default: 3000
  }
})

const isVisible = ref(true)

onMounted(() => {
  // 组件挂载后启动定时器，到点隐藏
  setTimeout(() => {
    isVisible.value = false
  }, props.duration)
})
</script>

<template>
  <div v-show="isVisible" class="alert alert-success mb-2 col-span-3 text-white font-medium">
    {{ msg }}
  </div>
</template>

父组件使用：

<script setup>
import MsgAlerts from './Message.vue'

const msg = 'Produto cadastrado com sucesso!'
</script>

<template>
  <!-- 默认3秒隐藏 -->
  <MsgAlerts :msg="msg" />
  <!-- 可选：自定义5秒隐藏 -->
  <!-- <MsgAlerts :msg="msg" :duration="5000" /> -->
</template>

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