Wie finde ich die vue.js-Komponente, die einem DOM-Element entspricht?

Wenn ich habe

element = document.getElementById(id);

Gibt es eine vue-Methode, die der jQuery entspricht

$(element)

Einfach so (in Ihrer Methode in “Methoden”):

element = this.$el;

🙂

Der richtige Weg, dies zu tun, wäre die Verwendung von v-el Anweisung, ihm eine Referenz zu geben. Dann können Sie tun this.$$[reference].

Update für Version 2

In Vue 2 werden Refs sowohl für Elemente als auch für Komponenten verwendet: http://vuejs.org/guide/migration.html#v-el-and-v-ref-replaced

In Vue.js 2 Innerhalb einer Vue-Instanz oder Komponente:

• Verwenden this.$el um das HTMLElement zu erhalten, in das die Instanz/Komponente gemountet wurde

Von einem HTMLElement:

• Verwenden .__vue__ aus dem HTMLElement
  • Z.B var vueInstance = document.getElementById('app').__vue__;

Ein … haben VNode in einer Variablen namens vnode du kannst:

• verwenden vnode.elm um das Element zu erhalten, für das VNode gerendert wurde
• verwenden vnode.context um das zu bekommen VueComponent Instanz, dass die Komponente von VNode deklariert wurde (dies gibt normalerweise die übergeordnete Komponente zurück, kann Sie aber bei der Verwendung überraschen Schlüssel.
• verwenden vnode.componentInstance um das zu bekommen Tatsächliche Vue-Komponente Instanz, um die es bei VNode geht

Quelle wörtlich: vue/flow/vnode.js.

Lauffähige Demo:

Vue.config.productionTip = false; // disable developer version warning
console.log('-------------------')

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('[DIRECTIVE] My Element is:', vnode.elm);
    console.log('[DIRECTIVE] My componentInstance is:', vnode.componentInstance);
    console.log('[DIRECTIVE] My context is:', vnode.context);
    // some properties, such as $el, may take an extra tick to be set, thus you need to...
    Vue.nextTick(() => console.log('[DIRECTIVE][AFTER TICK] My context is:', vnode.context.$el))
  }
})

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

<script src="https://unpkg.com/v[email protected]/dist/vue.min.js"></script>

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

Wenn Sie mit einem DOM-Element beginnen, suchen Sie nach a __vue__ Eigenschaft auf diesem Element. Alle Vue View-Modelle (Komponenten, VMs erstellt von v-repeat Verwendung) wird diese Eigenschaft haben.

Sie können die Funktion “Inspect Element” in der Entwicklerkonsole Ihres Browsers (zumindest in Firefox und Chrome) verwenden, um die DOM-Eigenschaften anzuzeigen.

Ich hoffe, das hilft!

• this.$el – zeigt auf das Wurzelelement der Komponente
• this.$refs.<ref name> + <div ref="<ref name>" ... – zeigt auf ein verschachteltes Element

💡 benutzen $el/$refs nur nach mounted() Schritt von vue-Lebenszyklus

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

Da v-ref keine Direktive mehr ist, sondern ein spezielles Attribut, kann es auch dynamisch definiert werden. Dies ist besonders nützlich in Kombination mit v-for.

Zum Beispiel:

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

und in der Vue-Komponente, die Sie verwenden können

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

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

Also dachte ich $0.__vue__ funktioniert nicht sehr gut mit HOCs (High Order Components).

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

Aus der obigen Vorlage, falls vorhanden ListItem Komponente, das hat ProductItem wie es root ist, und Sie versuchen es $0.__vue__ in der Konsole wäre das Ergebnis unerwartet die ListItem Beispiel.

Hier habe ich eine Lösung, um die Komponente der niedrigsten Ebene auszuwählen (ProductItem in diesem Fall).

Plugin

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

Installieren

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

Verwenden

• Klicken Sie in der Browserkonsole auf das Dom-Element.
• Typ $0.__vueComponent__.
• Machen Sie mit der Komponente, was Sie wollen. Zugangsdaten. Änderungen vornehmen. Führen Sie exponierte Methoden von e2e aus.

Bonusfunktion

Wenn Sie mehr wollen, können Sie einfach verwenden $0.__vue__.$parent. Das heißt, wenn 3 Komponenten denselben Dom-Knoten teilen, müssen Sie schreiben $0.__vue__.$parent.$parent um die Hauptkomponente zu erhalten. Dieser Ansatz ist weniger lakonisch, bietet aber eine bessere Kontrolle.