Tengo un div externo que necesito renderizar dentro de mi aplicación Vue. Estoy tratando de usar una tragamonedas, pero eso no es posible porque no se procesa nada.

¿Alguna idea?

El objetivo es tener HTML como este (Vue se monta en #app):

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

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

Entonces el componente Vue

<template>
  <div>
    <slot name="header"></slot>
  </div>
</template>
0
Corey 11 ago. 2020 a las 02:18

2 respuestas

La mejor respuesta

Puede usar un <component> dinámico y referirse a su elemento #header como referencia de plantilla.

Por ejemplo,

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>
1
Phil 11 ago. 2020 a las 02:06

Las tragamonedas se utilizan principalmente con componentes de Vue reutilizables para que el componente principal pueda representar cosas personalizadas dentro de las secciones designadas del niño. El componente raíz no tiene un padre, por lo que no tiene sentido usar ranuras para esto.

¿Por qué no puedes simplemente codificar el div en la plantilla? ¿O necesita que sea dinámico? ¿Cambiará el contenido del encabezado en algunas situaciones? Proporcione más información sobre cuál es su caso de uso; de lo contrario, mi respuesta es "simplemente codifíquelo".

Eche un vistazo a portal-vue. Permite que los componentes secundarios representen plantillas en cualquier lugar del DOM. Esto podría funcionar para su situación.

0
Decade Moon 10 ago. 2020 a las 23:40