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

Question

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

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

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

Answer 1

孩子：

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

家长：

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