Juste par ceci (dans votre méthode dans "méthodes"):

element = this.$el;

:)

Si vous commencez avec un élément DOM, recherchez une propriété __vue__ sur cet élément. Tous les Modèles de vue Vue (Composants, Machines Virtuelles créés par v-repeat Utilisation) auront cette propriété.

Vous pouvez utiliser la fonction "Inspect Element" dans la console de développement de votre navigateur (au moins dans Firefox et Chrome) pour afficher les propriétés DOM.

Espérons que cela aide!

Puisque v-ref n'est plus une directive, mais un attribut spécial, il peut également être défini dynamiquement. Ceci est particulièrement utile en combinaison avec v-pour.

Par exemple:

<ul>
    <li v-for="(item, key) in items" v-on:click="play(item,$event)">
        <a v-bind:ref="'key' + item.id" v-bind:href="item.url">
            <!-- content -->
        </a>
    </li>
</ul>

Et dans le composant Vue, vous pouvez utiliser

var recordingModel = new Vue({
  el:'#rec-container',
  data:{
    items:[]
  },

  methods:{
    play:function(key,e){
      // it contains the bound reference
      console.log(this.$refs['item'+key]);
    }
  }
});

J'ai donc pensé que $0.__vue__ ne fonctionnait pas très bien avec HOCs (composants d'ordre Élevé).

// ListItem.vue
<template>
    <vm-product-item/>
<template>

À partir du modèle ci-dessus, si vous avez un composant ListItem, qui a ProductItem comme racine, et que vous essayez $0.__vue__ dans la console, le résultat serait inopinément l'instance ListItem.

Ici, j'ai une solution pour sélectionner le composant de niveau le plus bas (ProductItem dans ce cas).

Greffon

// DomNodeToComponent.js
export default {
  install: (Vue, options) => {
    Vue.mixin({
      mounted () {
        this.$el.__vueComponent__ = this
      },
    })
  },
}

Installer

import DomNodeToComponent from'./plugins/DomNodeToComponent/DomNodeToComponent'
Vue.use(DomNodeToComponent)

Utiliser

• dans la console du navigateur, cliquez sur dom élément.
• Tapez $0.__vueComponent__.
• faites ce que vous voulez avec le composant. Les données d'accès. Faire des changements. Exécuter des méthodes exposées à partir de e2e.

Fonction Bonus

Si vous en voulez plus, vous pouvez simplement utiliser $0.__vue__.$parent. Ce qui signifie que si 3 composants partagent le même nœud dom, vous devrez écrire $0.__vue__.$parent.$parent pour obtenir le composant principal. Cette approche est moins laconique, mais donne un meilleur contrôle.

En Vue.js 2 dans une Instance Vueou composant:

• Utilisez this.$el pour obtenir L'élément HTMLElement sur lequel l'instance/le composant a été monté

À Partir d'un HTMLElement:

• utiliser .__vue__ à partir de HTMLElement
  • par exemple var vueInstance = document.getElementById('app').__vue__;

Avoir un VNode dans une variable appelée vnode, vous pouvez:

• Utilisez vnode.elm pour obtenir l'élément auquel VNode a été rendu
• utilisez vnode.context pour obtenir L'instance Vue que VNode belogs à
• utilisez vnode.componentInstance pour obtenir l'instancedu composant sur laquelle VNode se trouve

Source, littéralement: vue/flux/vnode.js.

Démo Exécutable:

Vue.component('my-component', {
  template: `<input>`,
  mounted: function() {
    console.log('[my-component] is mounted at element:', this.$el);
  }
});

Vue.directive('customdirective', {
  bind: function (el, binding, vnode) {
    console.log('My Element is:', vnode.elm);
    console.log('My componentInstance is:', vnode.componentInstance);
    console.log('My Vue Instance is:', vnode.context);
  }
})

new Vue({
  el: '#app',
  mounted: function() {
    console.log('This Vue instance is mounted at element:', this.$el);
    
    console.log('From the element to the Vue instance:', document.getElementById('app').__vue__);
    console.log('Vue component instance of my-component:', document.querySelector('input').__vue__);
  }
})

<script src="https://unpkg.com/vue@2.5.15/dist/vue.min.js"></script>

<h1>Open the browser's console</h1>
<div id="app">
  <my-component v-customdirective=""></my-component>
</div>

Si vous voulez écouter un événement (C'est-à-dire OnClick) sur une entrée avec un id" demo", vous pouvez utiliser:

new Vue({
  el: '#demo',
  data: {
    n: 0
  },
  methods: {
   onClick: function (e) {
     console.log(e.target.tagName) // "A"
     console.log(e.targetVM === this) // true
  }
 }
})

Exactement ce que Kamil a dit,

element = this.$el

Mais assurez-vous que vous n'avez pas instances de fragment.

Comme dans Vue 2.0, aucune solution ne semble disponible, une solution propre que j'ai trouvée est de créer un attribut vue-id, et de le définir également sur le modèle. Ensuite, sur created et beforeDestroy cycle de vie, ces instances sont mises à jour sur l'objet global.

Fondamentalement:

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

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

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