Vue.js - 如何在其父组件的 DOM 元素之外创建子组件的 DOM 元素答案

【问题标题】：Vue.js - How to create child component's DOM element outside of it's parent component's DOM elementVue.js - 如何在其父组件的 DOM 元素之外创建子组件的 DOM 元素
【发布时间】：2019-05-29 04:16:22
【问题描述】：

我正在尝试创建一个子组件，但不是将它的 DOM 元素默认放在父组件中，而是将其放在其他地方。

我想创建模态组件的子组件，但是有一个问题，因为模态组件溢出：隐藏，我需要子组件在模态之外可见。我找到的最好的解决方案是 Vuetify 如何使用他们的 v-menu 组件（下面的链接）来做到这一点。他们根本不将子组件的 DOM 元素创建为其父组件的 DOM 元素的子节点，而是将其放在其他位置。我在 github 上阅读了他们的代码，但我对实现感到很困惑，并且在 Vue 文档中没有发现任何关于此的内容。

https://vuetifyjs.com/en/components/menus

【问题讨论】：

我很确定您不能在其父 DOM 元素之外创建子元素，但您可能会通过 position:absolute 获得所需的效果。

标签： javascript vue.js vuetify.js

【解决方案1】：

孩子：

<template>
    <div>
         I'm CHILD
         <slot></slot>
    </div>
</template>

家长：

<template>
    <div>
        <Child>
            <span>I'm parent</span>
        </Child>
    </div>
</template>

【讨论】：

这可能会回答这个问题。但是，仅代码的答案不如记录代码或详细解释为什么此代码是问题的解决方案的答案有用。
谢谢，下次我会更好地解释如何解决问题