Digamos que tengo un componente de vuejs llamado child-component que se agrega a un componente principal de la siguiente manera.

<child-component>
  <div>Hello</div>
</child-component>

Nótese bien esta no es la plantilla del componente secundario. Así es como el componente hijo se agrega al padre.

¿Cómo puedo obtener el innerHTML, es decir, <div>Hello</div> en el componente secundario como una cadena?

5
Coffee Bite 15 nov. 2017 a las 04:05

2 respuestas

La mejor respuesta

Dentro del componente, child-component, el HTML estaría disponible en el controlador del ciclo de vida mounted como this.$el.innerHTML. Los vnodes analizados estarían disponibles en this.$slots.default.

console.clear()

Vue.component("child-component",{
  template: `<div><slot/></div>`,
  mounted(){
    console.log("HTML", this.$el.innerHTML)
  }
})

new Vue({
  el: "#app"
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></script>
<div id="app">
  <child-component>
    <div>Hello</div>
  </child-component>
</div>
4
Bert 15 nov. 2017 a las 01:16

Puede ver el uso de referencias de componentes secundarios de Vue. Eso le permitirá acceder al innerHTML del componente secundario desde el componente principal.

Simplemente agregue un atributo ref a su componente secundario. Puede ser cualquier cosa que elija:

<child-component ref="mychildcomponent">
   <div>Hello</div>
</child-component>

Luego, en los métodos principales, puede hacer algo como:

let childEl = this.$refs.mychildcomponent

Eso establecerá childEl todo el componente secundario al que ha hecho referencia. Para obtener el HTML interno, solo tiene que ir un poco más allá y hacer algo como esto:

let childEl = this.$refs.mychildcomponent.$el.innerHTML

Eso debería darle una cadena del innerHTML del componente secundario.

Esto podría ayudar: https://vuejs.org/v2/guide/ components.html # Child-Component-Refs

Alternativamente, si desea obtenerlo del componente secundario, simplemente haga lo siguiente dentro de un método:

let componentHTML = this.$el.innerHTML

Espero que eso ayude.

2
Elizabeth Fine 15 nov. 2017 a las 01:52