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

Question

我正在尝试创建一个子组件，但与其将DOM元素默认设置为父组件中的父组件，不如将其放置在其他位置。

我想创建模态组件的子组件，但是存在一个问题，因为模态组件溢出：隐藏，并且我需要子组件在模态外部可见。我发现的最佳解决方案是Vuetify如何使用其v菜单组件（下面的链接）来实现。他们只是不创建子组件的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>