DOM元素到相应的vue.js组件

Question

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

如果我有

element = document.getElementById(id);

是否有一个等同于jQuery的vue方法 $(element)？

Answer 1

就这样(在"方法"中的方法):

element = this.$el;

:)

Answer 2

正确的方法是使用该v-el指令为其提供参考.那你可以做this.$$[reference].

更新vue 2

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

Answer 3

在Vue.js中,在Vue实例或组件内部:

• 使用this.$el来获取HTML元素的实例/组件被安装到

来自HTMLElement:

• 使用.__vue__HTMLElement
  • 例如 var vueInstance = document.getElementById('app').__vue__;

在一个VNode名为变量的变量中vnode你可以:

• 用于vnode.elm获取VNode呈现的元素
• 用于vnode.context获取VNode所支持的Vue实例
• 用于vnode.componentInstance获取VNode所关注的Component实例

来源,字面意思:vue/flow/vnode.js.

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

Answer 4

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

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

希望有所帮助!

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

Answer 6

所以我认为它$0.__vue__不能很好地与 HOC（高阶组件）配合使用。

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

从上面的模板中，如果您有ListItem组件，该组件具有ProductItem根目录，并且您$0.__vue__在控制台中尝试，结果意外地会是实例ListItem。

在这里，我得到了一个选择最低级别组件的解决方案（ProductItem在本例中）。

插入

// 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 节点，则您必须编写$0.__vue__.$parent.$parent才能获取主组件。这种方法不太简洁，但可以提供更好的控制。

Answer 7

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