web-dev-qa-db-fra.com

Elément DOM du composant vue.js correspondant

Comment trouver le composant vue.js correspondant à un élément DOM?

Si j'ai

element = document.getElementById(id);

Existe-t-il une méthode vue équivalente à jQuery $(element) _?

javascriptdomvue.js
48
Ghigo

La bonne façon de faire serait d'utiliser le v-el directive pour lui donner une référence. Ensuite, vous pouvez faire this.$$[reference].

Mise à jour pour vue 2

Dans Vue 2 références sont utilisées à la fois pour les éléments et les composants: http://vuejs.org/guide/migration.html#v-el-and-v-ref-replaced

44
blockhead

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

element = this.$el;

:)

41
Kamil Kiełczewski

Dans Vue.js 2 Inside a Vue Instance ou Composant :

  • Utilisez this.$el Pour obtenir le HTMLElement auquel l'instance/le composant a été monté

D'un HTMLElement:

  • Utilisez .__vue__ À partir de HTMLElement
    • Par exemple. var vueInstance = document.getElementById('app').__vue__;

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

  • utilisez vnode.Elm pour obtenir l'élément pour lequel VNode a été rendu
  • utilisez vnode.context pour obtenir l'instance Vue à laquelle VNode appartient
  • utilisez vnode.componentInstance pour obtenir l'instance Component à propos de VNode

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

Démo Runnable:

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/[email protected]/dist/vue.min.js"></script>

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

Si vous commencez avec un élément DOM, recherchez un __vue__ propriété sur cet élément. Any Vue Voir les modèles (composants, machines virtuelles créées par v-repeat _ usage) aura cette propriété.

Vous pouvez utiliser la fonctionnalité "Inspecter l'élément" dans la console de développement de votre navigateur (au moins dans Firefox et Chrome) pour afficher les propriétés du DOM.

J'espère que ça t'as aidé!

11
BigBlueHat

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

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 Vue que 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]);
    }
  }
});
4
Kathan Shah

Donc, j'ai pensé $0.__vue__ ne fonctionne pas très bien avec les HOC (composants d'ordre élevé).

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

Dans le modèle ci-dessus, si vous avez le composant ListItem, il a comme racine ProductItem et vous essayez $0.__vue__ dans la console, le résultat inattendu serait l’instance ListItem.

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

Brancher

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

Installer

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

Utilisation

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

Fonction bonus

Si vous 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.

3
Yauheni Prakopchyk

J'ai trouvé cet extrait ici . L'idée est de remonter la hiérarchie des noeuds DOM jusqu'à un __vue__ propriété est trouvée.

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

En Chrome:

Usage in Chrome

0
bernie
  • this.$el - pointe sur l'élément racine du composant
  • this.$refs.<ref name> + <div ref="<ref name>" ... - pointe sur un élément imbriqué

???? utilisez $el/$refs uniquement après mounted() étape de vue cycle de vie

<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>

enter image description here

0
Jossef Harush