Say I have a vuejs ponent called child-ponent which is added to a parent ponent as follows.

<child-ponent>
  <div>Hello</div>
</child-ponent>

N.B. this is not the template of the child ponent. This is how the child ponent is added to the parent.

How can I get the innerHTML, i.e. <div>Hello</div> in the child ponent as a string?

Say I have a vuejs ponent called child-ponent which is added to a parent ponent as follows.

<child-ponent>
  <div>Hello</div>
</child-ponent>

N.B. this is not the template of the child ponent. This is how the child ponent is added to the parent.

How can I get the innerHTML, i.e. <div>Hello</div> in the child ponent as a string?

• javascript
• vue.js
• vuejs2

• 1 Do you mean, the actual non-parsed html in the slot? Also, where do you want to "get" it? – Bert Commented Nov 15, 2017 at 1:08
• As a data variable in the ponent – Coffee Bite Commented Nov 15, 2017 at 1:21
• 1 WHY are you doing this? You shouldn't have to do this in 99% of situations. – Bill Criswell Commented Nov 15, 2017 at 1:29
• @BillCriswell in my case, I'm getting a bunch of html from a Component library I'm using, and there's one specific element that's created with it but not directly accessible and I'd like to add html to it. – Cesar Martinez Dominguez Commented Jan 21, 2019 at 19:11

2 Answers 2

Inside the ponent, child-ponent, the HTML would be available in the mounted lifecycle handler as this.$el.innerHTML. The parsed vnodes would be available from this.$slots.default.

console.clear()

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

new Vue({
  el: "#app"
})

<script src="https://cdnjs.cloudflare./ajax/libs/vue/2.5.3/vue.min.js"></script>
<div id="app">
  <child-ponent>
    <div>Hello</div>
  </child-ponent>
</div>

You could look at using Vue Child Component Refs. That will let you access the child ponent's innerHTML from the parent ponent.

Just add a ref attribute to your child ponent. It can be anything you choose:

<child-ponent ref="mychildponent">
   <div>Hello</div>
</child-ponent>

Then in the parent methods, you can do something like:

let childEl = this.$refs.mychildponent

That will set childEl the entire child ponent that you've referenced. To get the innerHTML youd just have to go a little further, and do something like this:

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

That should give you a string of the child ponent's innerHTML.

This might help: https://v2.vuejs/v2/guide/ponents.html#Child-Component-Refs

Alternatively if you want to get it from the child ponent itself, just do the following within a method:

let ponentHTML = this.$el.innerHTML

Hope that helps.