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

JavaScript

达蒙逆天Pro

2020-03-11

如何找到与DOM元素相对应的vue.js组件?

如果我有

element = document.getElementById(id);

有一个相当于jQuery的vue方法 $(element)吗?

第576篇《对应于vue.js组件的DOM元素》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

7个回答
null 2020.03.11

恰恰是卡米尔所说的

element = this.$el

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

前端MandyJinJin 2020.03.11

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

基本上:

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

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

data: function() {
    return {
        vueId: this._id
    }
}
十三神无 2020.03.11
  • 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>

在此处输入图片说明

神无LEYMandy 2020.03.11

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:

在Chrome中的用法

凯泡芙JinJin 2020.03.11

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

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

希望有帮助!

A小卤蛋Pro 2020.03.11

只是这样(在您的方法“方法”中):

element = this.$el;

:)

LEY理查德 2020.03.11

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

vue 2的更新

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

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android