Question

我需要在Vue应用程序内部渲染一个外部div。我正在尝试使用一个插槽，就像那样，因为没有内容呈现，所以这是不可行的。

有什么想法吗？

目标是拥有这样的HTML（Vue安装在#app上）：

<div id="app" data-slot-header="#header"></div>

<div id="header">
  <h1>Title here</h1>
</div>

然后是Vue组件

<template>
  <div>
    <slot name="header"></slot>
  </div>
</template>

Answer 1

您可以使用动态<component>并将#header元素称为template reference。

例如

new Vue({
  data: () => ({
    headerComponent: {
      template: '#header' // refer to template element by selector
    }
  }),
}).$mount('#app')

#app:before,#header:before{position:absolute;top:0;right:0;color:rgba(1,1,1,.5);font-size:.8rem}#app{border:1px solid #666;position:relative}#app:before{content:'Vue app'}#header{position:relative;opacity:.5}#header:before{content:'Original header'}

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<div id="app">
  <p>Dynamic component rendered here ?</p>
  <component :is="headerComponent"></component>
</div>

<div id="header">
  <h1>Title here</h1>
</div>

Answer 2

插槽主要与可重复使用的Vue组件一起使用，以便父组件可以在子代的指定部分内呈现自定义内容。根组件没有父组件，因此为此使用插槽是没有意义的。

为什么您不能仅将div硬编码在模板中？还是您需要它是动态的？在某些情况下，您会换出标头内容吗？请提供有关您的用例的更多信息，否则我的回答是“只需对其进行硬编码”。

看看portal-vue。它允许子组件在DOM中的任何位置呈现模板。这可能适合您的情况。

在Vue组件内渲染外部元素

2 个答案: