如何从自定义组件内部使用 Vuetify 的父激活器

Question

Vuetify 3 的

VDialog

有

activator

属性，可以像这样使用：

<VBtn>
  Click me to show a dialog
  <VDialog activator="parent">
    Ta-da!
  </VDialog>
</VBtn>

但是我在整个应用程序中多次使用了这个对话框。所以我想将它抽象成它自己的组件。像这样：

<!-- MyDialog.vue -->
<script setup>
const props = defineProps({
  activator: String,
});
</script>

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

然后在父级中...

<VBtn>
  Click me to show a dialog
  <MyDialog activator="parent" />
</VBtn>

但这似乎不起作用。看起来

<VDialog>

的父级是

<template>

。我怎样才能实现这个目标？

Answer 1

<script setup>
const props = defineProps({
  activator: String,
});
</script>

不会将

props

变量公开给

<template />

。相反，它将每个单独的 prop 公开为变量。这意味着这将是正确的模板：

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

---

如果上述方法没有帮助，我建议您创建一个可运行最小可重现示例以允许调试和测试任何潜在的解决方案。如果您需要类似节点的在线环境，请使用codesandbox.io或类似的。