Vue中v-snackbar包装器状态管理问题：如何正确实现？

你的问题核心是外部状态与内部状态未实现双向同步：当点击关闭按钮将内部isShowing设为false时，外部的showSnackbar仍保持true；下次点击按钮再次将showSnackbar设为true时，由于值未发生变化（从true到true），监听函数不会触发，导致snackbar无法再次打开。

正确的做法是让封装组件遵循Vue的v-model规范，实现外部状态与内部状态的双向绑定，完美适配Vuetify的v-snackbar组件。

修正后的封装组件代码 #

<template>
  <v-snackbar v-model="localShow" @update:model-value="handleUpdate">
    <slot></slot>
    <template #actions>
      <v-btn variant="text" @click="localShow = false">Close</v-btn>
    </template>
  </v-snackbar>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';

// 接收外部v-model绑定的状态值
const props = defineProps<{
  modelValue: boolean
}>()

// 定义更新事件，用于同步外部状态
const emit = defineEmits<{
  'update:modelValue': [value: boolean]
}>()

// 内部状态，直接控制v-snackbar的显示隐藏
const localShow = ref(props.modelValue)

// 监听外部状态变化，同步到内部
watch(() => props.modelValue, (newVal) => {
  localShow.value = newVal
})

// 内部状态变化时，同步更新外部状态
function handleUpdate(newVal: boolean) {
  emit('update:modelValue', newVal)
}
</script>

简化后的调用方式 #

现在可以直接用v-model绑定外部状态，无需通过options对象传递：

<v-btn @click="showSnackbar = true">Open Snackbar</v-btn>
<Snackbar v-model="showSnackbar"> Warning </Snackbar>

<script setup lang="ts">
import { ref } from 'vue';
const showSnackbar = ref(false)
</script>

方案原理 #

1. 外部点击按钮将showSnackbar设为true时，组件内部的watch会监听到变化，同步localShow的值以打开snackbar。
2. 点击关闭按钮或snackbar自动关闭时，v-snackbar的update:model-value事件会触发handleUpdate，通过emit将false同步回外部的showSnackbar。
3. 下次点击按钮时，showSnackbar从false变为true，watch能正常触发，snackbar可再次打开。

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