Ответ 1

Правильный способ сделать это - использовать директиву v-el, чтобы дать ссылку. Затем вы можете сделать this.$$[reference].

Обновление для vue 2

В Vue 2 refs используются как для элементов, так и для компонентов: http://vuejs.org/guide/migration.html#v-el-and-v-ref-replaced

Ответ 2

Просто этим (в вашем методе в "методах" ):

element = this.$el;

:)

Ответ 3

В Vue.js 2 Внутри экземпляра Vue или компонента:

• Используйте this.$el, чтобы получить HTMLElement, к которому был подключен экземпляр/компонент

Из HTMLElement:

• Используйте .__vue__ из HTMLElement
  • Например. var vueInstance = document.getElementById('app').__vue__;

Имея VNode в переменной с именем vnode, вы можете:

• используйте vnode.elm, чтобы получить элемент, который VNode визуализировал в
• используйте vnode.context, чтобы получить экземпляр Vue, который VNode запускает в
• используйте vnode.componentInstance, чтобы получить экземпляр компонента, о котором VNode рассказывает о

Источник, буквально: vue/flow/vnode.js.

Демоверсия запуска:

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 console</h1>
<div id="app">
  <my-component v-customdirective=""></my-component>
</div>

Ответ 4

Если вы начинаете с элемента DOM, проверьте свойство __vue__ на этом элементе. Любые модели Vue View (компоненты, виртуальные машины, созданные при использовании v-repeat) будут иметь это свойство.

Вы можете использовать функцию "Проверить элемент" в консоли разработчика браузеров (по крайней мере, в Firefox и Chrome), чтобы просмотреть свойства DOM.

Надеюсь, что это поможет!

Ответ 5

Так как v-ref больше не является директивой, а специальным атрибутом, он также может быть динамически определен. Это особенно полезно в сочетании с v-for.

Например:

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

а в компоненте Vue вы можете использовать

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]);
    }
  }
});

Ответ 6

Итак, я понял, что $0.__vue__ работает не очень хорошо с HOC (компоненты высокого порядка).

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

Из вышеприведенного шаблона, если у вас есть компонент ListItem, у которого ProductItem есть его корень, и вы пытаетесь использовать $0.__vue__ в консоли, результат неожиданно будет экземпляром ListItem.

Здесь я получил решение выбрать компонент самого низкого уровня (ProductItem в этом случае).

Plugin

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

Установка

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

Использование

• В консоли браузера нажмите элемент dom.
• Введите $0.__vueComponent__.
• Делайте все, что хотите, с помощью компонента. Доступ к данным. Делайте изменения. Запустите открытые методы из e2e.

Бонусная функция

Если вы хотите больше, вы можете просто использовать $0.__vue__.$parent. Значение, если 3 компонента имеют один и тот же dom node, вам нужно написать $0.__vue__.$parent.$parent, чтобы получить основной компонент. Этот подход менее лаконичен, но дает лучший контроль.

Ответ 7

Я нашел этот фрагмент здесь. Идея состоит в том, чтобы идти вверх по иерархии узлов DOM, пока не будет найдено свойство __vue__.

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

В Chrome:

Ответ 8

• this.$el - указывает на корневой элемент компонента
• this.$refs.<ref name> + <div ref="<ref name>" ... - указывает на вложенный элемент

💡 use $el/$refs only after mounted() step of vue lifecycle

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

Ответ 9

Если вы хотите прослушать событие (например, OnClick) на входе с идентификатором "demo", вы можете использовать:

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

Ответ 10

Именно то, что сказал Камиль,

element = this.$el

Но убедитесь, что у вас нет фрагментов > .

Ответ 11

Так как в 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
    }
}