我在Vue中目睹了我想要理解的非常奇怪的行为。我有这个模板：
IhConfirm.vue
<template>
<v-dialog
data-cy="ihconfirm-datacy" // <--
v-model="dialog"
:max-width="options.width"
:style="{ zIndex: options.zIndex }"
persistent
@keydown.esc="cancel"
>
<ih-modal-card id="ih-confirm-modal"> // <--
<ih-modal-title class="headline">{{ options.title }}</ih-modal-title>
<ih-modal-body class="body-1 confirm-body">
...
</ih-modal-body>
<ih-modal-actions>
...
</ih-modal-actions>
</ih-modal-card>
</v-dialog>
</template>
重要的是，我添加了data-cy="ihconfirm-datacy"属性，这是出于严格的调试目的。属性id="ih-confirm-modal"已经存在。为了调试，我使用每个作为彼此的参考。
只有一个孩子我的期望是，如果我给出一个属性，我应该在rendered元素中看到它，该元素将rendered封装在实际的浏览器DOM中，或者至少在层次结构中。相反，我看到它被抛到了另一个不同的部分和不相关的树枝上。
DOM 图片
这对我来说没有意义。我知道Vue将类似html的模板语法渲染成高度优化的JS代码，可以做任何它想做的事情，但为什么以及如何将其制作或配置为这样的事情？
FWIW我最初遇到的问题是，我们在IhConfirm模态中声明了一个id，但它是一个通用组件，如果打开两个这样的模态，我们就有两个id相同的元素，这就破坏了测试。事实上，即使他们点击模态按钮，它也只是用显示来隐藏它：没有，这可能是不好的做法。上面的代码不是我想要的解决方案，只是一个示例。当我在父组件中执行类似的操作并将属性传递到其实例中时，同样的行为也会发生——它将原本应该是两个相关元素的东西抛得很远。在我的开发工具中，每个都有一个，所以不会出现错误的身份
我想了解这种渲染是如何实现的。这就像父组件正在将子组件交给用户采用。
感谢您的帮助和见解！
这是Vuetify模态组件的特殊设计。由于模态必须出现在everything之上，并且模态组件可能深度嵌套了未知数量的层，因此Vuetify的v-dialog在内部设计为作为应用程序根(v-app(组件的直接子级附加到DOM树。有一个attach道具可以添加到v-dialog组件中，它实际上可以让您更改这种行为。