对应于vue.js组件的DOM元素

恰恰是卡米尔所说的

element = this.$el

但是请确保您没有片段实例。

由于在Vue 2.0中似乎没有可用的解决方案，因此我发现一种干净的解决方案是创建一个vue-id属性，并将其设置在模板上。然后在created和beforeDestroy生命周期这些实例更新全局对象上。

基本上：

created: function() {
    this._id = generateUid();
    globalRepo[this._id] = this;
},

beforeDestroy: function() {
    delete globalRepo[this._id]
},

data: function() {
    return {
        vueId: this._id
    }
}

• this.$el -指向组件的根元素
• this.$refs.<ref name>+ <div ref="<ref name>" ...-指向嵌套元素

💡 仅在vue生命周期步骤之后使用$el/$refsmounted()

<template>
    <div>
        root element
        <div ref="childElement">child element</div>
    </div>
</template>

<script>
    export default {
        mounted() {
            let rootElement = this.$el;
            let childElement = this.$refs.childElement;

            console.log(rootElement);
            console.log(childElement);
        }
    }
</script>

<style scoped>
</style>

I found this snippet here. The idea is to go up the DOM node hierarchy until a __vue__ property is found.

function getVueFromElement(el) {
  while (el) {
    if (el.__vue__) {
      return el.__vue__
    } else {
      el = el.parentNode
    }
  }
}

In Chrome:

如果您从DOM元素开始，请检查__vue__该元素的属性。任何Vue视图模型（组件，按v-repeat使用情况创建的VM ）都将具有此属性。

您可以在浏览器开发人员控制台（至少在Firefox和Chrome中）使用“检查元素”功能来查看DOM属性。

希望有帮助！

只是这样（在您的方法“方法”中）：

element = this.$el;

:)

正确的处理方法是使用v-el指令为其提供引用。那你就可以做this.$$[reference]。

vue 2的更新

在Vue 2中，refs用于元素和组件：http : //vuejs.org/guide/migration.html#v-el-and-v-ref-replaced