Vue父子组件向v-dialog传值、传递员工ID并解决弹窗堆叠问题

你需要的通过v-model传递员工ID的需求是可以实现的，同时以下方案可以解决弹窗堆叠的问题： #

1 改造子组件支持自定义v-model #

子组件不单独维护弹窗显示状态，将显示控制权交给父组件，同时在触发操作时将当前员工ID抛出给父组件：

<template>
  <v-dialog v-model="innerVisible" width="unset">
    <v-card class="px-15 py-8" elevation="0">
      <div class="px-6 py-8 mb-n4 text-center">
        <span class="lucky-point--text text-h6">
          Are you sure you want to access this employee?
        </span>
        <v-btn @click="handleConfirm">确认</v-btn>
        <v-btn @click="innerVisible = false">取消</v-btn>
      </div>
    </v-card>
  </v-dialog>
</template>
<!-- Vue3 script setup 写法 -->
<script setup>
import { computed } from 'vue'
const props = defineProps({
  id: Number,
  // 接收父组件传入的显示状态，对应v-model
  modelValue: Boolean
})
const emit = defineEmits(['update:modelValue', 'confirm'])

// 封装双向绑定，避免直接修改props
const innerVisible = computed({
  get: () => props.modelValue,
  set: (val) => emit('update:modelValue', val)
})

const handleConfirm = () => {
  // 抛出当前员工ID给父组件处理业务逻辑
  emit('confirm', props.id)
  innerVisible.value = false
}
</script>

如果是Vue2环境，子组件配置如下：

export default {
  props: {
    id: Number,
    value: Boolean // Vue2的v-model默认对应props的value
  },
  model: {
    prop: 'value',
    event: 'input'
  },
  methods: {
    handleConfirm() {
      this.$emit('confirm', this.id)
      this.$emit('input', false)
    }
  }
}

2 父组件控制弹窗显示状态 #

你遇到的弹窗堆叠问题，本质是多个弹窗实例的显示状态同时被设为true导致的，父组件只需维护当前激活的员工ID，保证同一时间只有一个弹窗的显示状态为true即可解决。

方案A：单弹窗复用（推荐，性能更好） #

只渲染一个弹窗实例，点击对应员工时存储当前选中的员工ID，打开弹窗即可：

<template>
  <!-- 员工列表 -->
  <div v-for="item in employeeList" :key="item.employeeid">
    <span>{{ item.name }}</span>
    <v-btn @click="openDialog(item.employeeid)">访问员工</v-btn>
  </div>
  <!-- 复用单个弹窗 -->
  <ClaimDialog
    :id="activeEmployeeId"
    v-model="dialogVisible"
    @confirm="handleEmployeeConfirm"
  />
</template>
<script setup>
import { ref } from 'vue'
import ClaimDialog from './ClaimDialog.vue'

// 员工列表数据
const employeeList = [
  { employeeid: 0099, name: '张三' },
  // 其他员工数据
]
const activeEmployeeId = ref(null)
const dialogVisible = ref(false)

const openDialog = (id) => {
  activeEmployeeId.value = id
  dialogVisible.value = true
}

const handleEmployeeConfirm = (id) => {
  console.log('获取到的员工ID：', id)
  // 后续业务逻辑处理
}
</script>

方案B：多弹窗实例适配 #

如果需要每个员工对应独立的弹窗实例，只需绑定显示状态为当前ID匹配即可：

<template>
  <div v-for="item in employeeList" :key="item.employeeid">
    <span>{{ item.name }}</span>
    <v-btn @click="activeId = item.employeeid">访问员工</v-btn>
    <ClaimDialog
      :id="item.employeeid"
      v-model="activeId === item.employeeid"
      @confirm="handleEmployeeConfirm"
    />
  </div>
</template>
<script setup>
import { ref } from 'vue'
const activeId = ref(null)
const handleEmployeeConfirm = (id) => {
  // 业务逻辑处理
}
</script>

核心说明 #

• 不需要用v-model="show[0099]"这种不规范的写法，通过自定义v-model配合事件携带参数即可实现传递员工ID的需求
• 两种父组件实现方案都保证了同一时间只有一个弹窗处于激活状态，彻底解决弹窗堆叠的问题

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