javascript - VueJS 如何定位当前组件并在其中创建Element？

Question

我试图获得对当前组件的相对访问权限，并在组件准备就绪后在其中创建一个 div。

这是我的组件的代码，它说明我正在尝试获取 this 元素并在 mounted 生命周期 Hook 上在其中创建一个 div。

{
    template: "<div></div>",
    mounted: function(){
        let testElm = this.$el.createElement("DIV")
        testElm.innerHTML = "testing"
    }
}

这会响应以下错误

TypeError: this.$el.createElement is not a function

Answer 1

有几件事。

createElement is a method of document .

这是一种非常不像 Vue 的处理方式。如果组件必须更新 DOM，那么您在 Mounted 方法中添加的任何内容都将被删除。

您可以使代码正常工作，但我不推荐它。不确定您想要实现什么目标。

console.clear()

Vue.component("test",{
  template: "<div></div>",
  mounted(){
    let test = document.createElement("div")
    test.innerHTML = "this is probably not a good idea"
    this.$el.appendChild(test)
  }
})

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

<script src="https://unpkg.com/vue@2.5.2"></script>
<div id="app">
  <test></test>
</div>