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

Question

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

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

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

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

Answer 1

在组件 child-component 中，HTML 将作为 this.$el.innerHTML 在 mounted 生命周期处理程序中可用。已解析的 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>