获取组件的内部html作为vuejs 2中的变量

Question

假设我有一个名为 vuejs 的组件child-component，它被添加到父组件中，如下所示。

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

注意这不是子组件的模板。这就是将子组件添加到父组件的方式。

如何获取innerHTML，即<div>Hello</div>在子组件中作为字符串？

Answer 1

在组件内部，child-componentHTML 将在mounted生命周期处理程序中作为 提供this.$el.innerHTML。解析后的 vnode 可以从 获得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>