blocks|key|4558169|text|正确的处理方法是使用v-el指令给它一个引用。然后你可以做this.$$[reference]。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4558170|vue+2更新|4558171|在Vue+2中，refs同时用于元素和组件：http://vuejs.org/guide/migration.html#v-el-and-v-ref-replaced|4558172|entityMap|0|LINK|mutability|MUTABLE|url|http://vuejs.org/guide/migration.html#v-el-and-v-ref-replaced^0|A|4|T|I|0|0|M|1P|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]|$9|U|A|V|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|W|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|X|8|@]|D|@$9|Y|A|Z|1|10]]|E|$]]|$1|J|3|-4|5|6|7|11|8|@]|D|@]|E|$]]]|K|$L|$5|M|N|O|E|$P|Q]]]]

The proper way to do with would be to use the <code>v-el</code> directive to give it a reference. Then you can do <code>this.$$[reference]</code>.

<h2>Update for vue 2</h2>

In Vue 2 refs are used for both elements and components: <a href="http://vuejs.org/guide/migration.html#v-el-and-v-ref-replaced" rel="noreferrer">http://vuejs.org/guide/migration.html#v-el-and-v-ref-replaced</a>

blocks|key|51569|text|就这样(在你的“方法”的方法中)：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|51570|element+=+this.$el;|code-block|syntax|javascript|51571|:)|51572|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Just by this (in your method in "methods"):

<pre><code>element = this.$el;
</code></pre>

:)

blocks|key|51547|text|如果从DOM元素开始，请检查该元素上的__vue__属性。任何Vue视图模型(组件、通过v-repeat使用创建的虚拟机)都将具有此属性。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|51548|您可以使用浏览器开发人员控制台中的"Inspect+Element“功能(至少在Firefox和Chrome中)来查看DOM属性。|51549|希望这能有所帮助！|51550|entityMap^0|J|7|18|8|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@$9|M|A|N|B|C]|$9|O|A|P|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Q|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|R|8|@]|D|@]|E|$]]|$1|J|3|-4|5|6|7|S|8|@]|D|@]|E|$]]]|K|$]]

If you're starting with a DOM element, check for a <code>__vue__</code> property on that element. Any Vue View Models (components, VMs created by <code>v-repeat</code> usage) will have this property.

You can use the "Inspect Element" feature in your browsers developer console (at least in Firefox and Chrome) to view the DOM properties.

Hope that helps!

blocks|key|4558295|text|因为v-ref不再是一个指令，而是一个特殊的属性，所以它也可以动态定义。这在与v-for结合使用时特别有用。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4558296|例如：|4558297|<ul>
++++<li+v-for="(item,+key)+in+items"+v-on:click="play(item,$event)">
++++++++<a+v-bind:ref="'key'+%2B+item.id"+v-bind:href="item.url">
++++++++++++
++++++++</a>
++++</li>
</ul>|code-block|syntax|javascript|4558298|在Vue组件中，您可以使用|4558299|var+recordingModel+=+new+Vue({
++el:'#rec-container',
++data:{
++++items:[]
++},

++methods:{
++++play:function(key,e){
++++++//+it+contains+the+bound+reference
++++++console.log(this.$refs['item'%2Bkey]);
++++}
++}
});|4558300|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

Since v-ref is no longer a directive, but a special attribute, it can also be dynamically defined. This is especially useful in combination with v-for. 

For example:

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

and in Vue component you can use 

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

blocks|key|4558318|text|我找到了这个here片段。其思想是在DOM节点层次结构中向上移动，直到找到__vue__属性。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4558319|function+getVueFromElement(el)+{
++while+(el)+{
++++if+(el.__vue__)+{
++++++return+el.__vue__
++++}+else+{
++++++el+=+el.parentNode
++++}
++}
}|code-block|syntax|javascript|4558320|在Chrome中：|4558321|​|4558322|📷|atomic|4558323|4558324|entityMap|0|LINK|mutability|MUTABLE|url|https://forum.vuejs.org/t/dom-element-to-vue-component/7617/2|1|IMAGE|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/3078a53f11729e84923deefe258d4950.png|imageAlt^0|11|7|6|4|0|0|0|0|0|0|1|1|0|0^^$0|@$1|2|3|4|5|6|7|16|8|@$9|17|A|18|B|C]]|D|@$9|19|A|1A|1|1B]]|E|$]]|$1|F|3|G|5|H|7|1C|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|1D|8|@]|D|@]|E|$]]|$1|M|3|N|5|6|7|1E|8|@]|D|@]|E|$]]|$1|O|3|P|5|Q|7|1F|8|@]|D|@$9|1G|A|1H|1|1I]]|E|$]]|$1|R|3|N|5|6|7|1J|8|@]|D|@]|E|$]]|$1|S|3|-4|5|6|7|1K|8|@]|D|@]|E|$]]]|T|$U|$5|V|W|X|E|$Y|Z]]|10|$5|11|W|12|E|$13|14|15|-4]]]]

I found this snippet <a href="https://forum.vuejs.org/t/dom-element-to-vue-component/7617/2" rel="nofollow noreferrer">here</a>. The idea is to go up the DOM node hierarchy until a <code>__vue__</code> property is found.

<pre><code>function getVueFromElement(el) {
 while (el) {
 if (el.__vue__) {
 return el.__vue__
 } else {
 el = el.parentNode
 }
 }
}
</code></pre>

In Chrome:

<a href="https://i.stack.imgur.com/Gugbo.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Gugbo.png" alt="Usage in Chrome"></a>

blocks|key|4558348|text|Vue+3的解决方案|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4558349|我需要创建一个导航栏，并在单击外部时折叠菜单项。我在mounted生命周期钩子中的窗口上创建了一个单击侦听器，如下所示|offset|length|style|CODE|4558350|mounted()+{
++++window.addEventListener('click',+(e)=>{
++++++++if(e.target+!==+this.$el)
++++++++++++this.showChild+=+false;
++++})
}|code-block|syntax|javascript|4558351|您还可以检查该元素是否为this.$el的子元素。然而，在我的例子中，孩子们都是链接，这并不重要。|4558352|entityMap^0|0|Q|7|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@$D|S|E|T|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|U|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<h1>Solution for Vue 3</h1>
I needed to create a navbar and collapse the menu item when clicked outside. I created a click listener on windows in <code>mounted</code> life cycle hook as follows
<pre><code>mounted() {
 window.addEventListener('click', (e)=&gt;{
 if(e.target !== this.$el)
 this.showChild = false;
 })
}
</code></pre>
You can also check if the element is child of this.$el. However, in my case the children were all links and this didn't matter much.

blocks|key|4558126|text|如果你想监听一个带有"demo“id的输入上的事件(即OnClick)，你可以使用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4558127|new+Vue({
++el:+'#demo',
++data:+{
++++n:+0
++},
++methods:+{
+++onClick:+function+(e)+{
+++++console.log(e.target.tagName)+//+"A"
+++++console.log(e.targetVM+===+this)+//+true
++}
+}
})|code-block|syntax|javascript|4558128|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

If you want listen an event (i.e OnClick) on an input with "demo" id, you can use:

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

blocks|key|51584|text|就像卡米尔说的那样|type|unstyled|depth|inlineStyleRanges|entityRanges|data|51585|element+=+this.$el|code-block|syntax|javascript|51586|但要确保你没有fragment+instances。|offset|length|51587|entityMap|0|LINK|mutability|MUTABLE|url|https://vuejs.org/guide/components.html#Fragment-Instance^0|0|0|7|I|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

Exactly what Kamil said, 

<pre><code>element = this.$el
</code></pre>

But make sure you don't have <a href="https://vuejs.org/guide/components.html#Fragment-Instance" rel="nofollow">fragment instances</a>.

blocks|key|51622|text|因为在Vue+2.0中，似乎没有可用的解决方案，所以我找到的一个干净的解决方案是创建一个vue-id属性，并在模板上设置它。然后，在created和beforeDestroy生命周期中，这些实例在全局对象上更新。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|51623|基本上：|51624|created:+function()+{
++++this._id+=+generateUid();
++++globalRepo[this._id]+=+this;
},

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

data:+function()+{
++++return+{
++++++++vueId:+this._id
++++}
}|code-block|syntax|javascript|51625|entityMap^0|18|6|1U|7|22|D|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]|$9|R|A|S|B|C]|$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|V|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|W|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|X|8|@]|D|@]|E|$]]]|N|$]]

Since in Vue 2.0, no solution seems available, a clean solution that I found is to create a <code>vue-id</code> attribute, and also set it on the template. Then on <code>created</code> and <code>beforeDestroy</code> lifecycle these instances are updated on the global object.

Basically:

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

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

data: function() {
 return {
 vueId: this._id
 }
}
</code></pre>

How can I find the vue.js component corresponding to a DOM element?
If I have
<pre><code>element = document.getElementById(id);
</code></pre>
Is there a vue method equivalent to the jQuery
<pre><code>$(element)
</code></pre>

DOM element to corresponding vue.js component

虚拟机

jQuery

如何找到与DOM元素对应的vue.js组件？如果我有element = document.getElementById(id);是否有等同于jQuery的vue方法$(element)

问DOM元素转换为相应的vue.js组件
EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问DOM元素转换为相应的vue.js组件EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问DOM元素转换为相应的vue.js组件
EN