gpt4 book ai didi

vue.js 挂载组件到应用根目录

转载 作者:搜寻专家 更新时间:2023-10-30 22:42:28 24 4
gpt4 key购买 nike

我有一个 modal.vue 组件如下:

<template>

<transition name="modal-transition">
<div class="modal-body" v-if="displayed">
<div class="modal-overlay" @click="displayed = false"></div>
<div class="modal-content">
<slot/>
</div>
</div>
</transition>

</template>

如何将此组件安装到应用程序根元素而不是就地安装?

对于粗略不准确的例子:

<body>
<div id="app">
<div class="header"></div>
<div class="nav"></div>
<div class="stage">
<div class="sub-nav"></div>
<div class="content">
<modal :display.sync="display">MY MODAL</modal> <-- Don't mount here...
</div>
</div>
<-- Mount here instead...
</div>
</body>

当前的问题是我的网站标题和导航层位于我的模态之上,并且全屏叠加变暗,而不是在模态叠加之后分层。

Header and Navigation on top

最佳答案

Vue 3 更新

现在有一个名为 teleport 的内置功能这允许将组件模板的部分安装到任何 DOM 元素。

OP 中的示例看起来像这样

<!-- MyModal.vue -->
<template>
<transition name="modal-transition">
<div class="modal-body" v-if="displayed">
<div class="modal-overlay" @click="displayed = false"></div>
<div class="modal-content">
<slot/>
</div>
</div>
</transition>
</template>
<!-- SomeDeeplyNestedComponent.vue -->
<template>
<teleport to="#app">
<!-- Can still receive props from parent -->
<MyModal :my-prop="foo">
<!-- slot content -->
</MyModal>
</teleport>
</template>

关于vue.js 挂载组件到应用根目录,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51390889/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com