VueJS 如何定位当前组件并在其中创建元素

Question

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

这是我组件的代码，它说明我正在尝试获取this元素并在mounted生命周期钩子上在其中创建一个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是一种document的方法。

这是一种非常不像 Vue 的做事方式。如果组件必须更新 DOM，则在挂载方法中添加的任何内容都将被删除。

你可以让代码工作，但我不推荐它。不确定您要完成什么。

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>