如何在自定义组件中使用Vuetify的parent activator激活VDialog

问题原因 #

将VDialog封装为自定义组件后，VDialog的直接父元素变成了自定义组件的根节点，而非外层的VBtn。此时activator="parent"会指向自定义组件实例，而非触发按钮，导致对话框无法正常触发。

解决方案 #

方案1：使用Vuetify官方推荐的插槽方式（最灵活） #

通过自定义组件的插槽传递触发元素，同时利用VDialog的activator作用域插槽绑定触发事件，适配所有场景。

MyDialog.vue：

<script setup>
const props = defineProps({
  content: {
    type: String,
    default: 'Ta-da!'
  }
})
</script>

<template>
  <VDialog>
    <!-- 暴露VDialog的activator绑定属性给父组件 -->
    <template #activator="{ props }">
      <slot name="activator" v-bind="props"></slot>
    </template>
    <VCard>
      <VCardText>{{ content }}</VCardText>
      <VCardActions>
        <VBtn @click="dialog.close">关闭</VBtn>
      </VCardActions>
    </VCard>
  </VDialog>
</template>

父组件使用：

<template>
  <MyDialog content="自定义对话框内容">
    <template #activator="{ props }">
      <VBtn v-bind="props">点击打开对话框</VBtn>
    </template>
  </MyDialog>
</template>

方案2：传递触发元素的DOM引用 #

如果希望保持父组件中VBtn包裹自定义组件的结构，可以通过传递触发按钮的ref给自定义组件，再将其作为VDialog的activator。

父组件：

<script setup>
import { ref } from 'vue'
const btnRef = ref(null)
</script>

<template>
  <VBtn ref="btnRef">
    点击打开对话框
    <MyDialog :activator="btnRef" />
  </VBtn>
</template>

MyDialog.vue：

<script setup>
const props = defineProps({
  activator: Object // 接收父组件传递的按钮ref
})
</script>

<template>
  <VDialog :activator="activator">
    Ta-da!
  </VDialog>
</template>

方案3：自动获取父元素DOM（依赖DOM结构） #

在自定义组件挂载时，直接获取父元素的DOM节点作为VDialog的activator，仅适用于触发按钮是自定义组件直接父元素的场景。

MyDialog.vue：

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

const parentEl = ref(null)

onMounted(() => {
  // 获取组件的直接父元素DOM
  parentEl.value = getCurrentInstance().vnode.el.parentElement
})
</script>

<template>
  <VDialog :activator="parentEl">
    Ta-da!
  </VDialog>
</template>

父组件使用：

<template>
  <VBtn>
    点击打开对话框
    <MyDialog />
  </VBtn>
</template>

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