Javascript VueJs 获取组件中的元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37104304/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
VueJs getting an element within a component
提问by Snewedon
I have a component, how can I select one of its elements?
我有一个组件，如何选择其中的一个元素？
I'm trying to get an input that is within this component's template.
我正在尝试获取此组件模板中的输入。
There could be multiple components so the queryselector must only parse the current instance of the component.
可能有多个组件，因此查询选择器必须只解析组件的当前实例。
Vue.component('somecomponent', {
template: '#somecomponent',
props: [...],
...
created: function() {
somevariablehere.querySelector('input').focus();
}
});
Thanks in advance
提前致谢
采纳答案by vbranden
you can access the children of a vuejs component with this.$children. if you want to use the query selector on the current component instance then this.$el.querySelector(...)
您可以使用this.$children. 如果要在当前组件实例上使用查询选择器，则this.$el.querySelector(...)
just doing a simple console.log(this)will show you all the properties of a vue component instance.
只需做一个简单的事情console.log(this)就会向您展示一个 vue 组件实例的所有属性。
additionally if you know the element you want to access in your component, you can add the v-el:uniquenamedirective to it and access it via this.$els.uniquename
此外，如果您知道要在组件中访问的元素，则可以向其添加v-el:uniquename指令并通过以下方式访问它this.$els.uniquename
回答by tariqdaouda
vuejs 2
Vuejs 2
v-el:el:uniquenamehas been replaced by ref="uniqueName". The element is then accessed through this.$refs.uniqueName.
v-el:el:uniquename已被 取代ref="uniqueName"。然后通过 访问该元素this.$refs.uniqueName。
回答by acdcjunior
The answers are not making it clear:
答案并没有说清楚：
Use this.$refs.someName, but, in order to use it, you must add ref="someName"in the parent.
使用this.$refs.someName，但是，为了使用它，您必须添加ref="someName"父.
See demo below.
请参阅下面的演示。
new Vue({
el: '#app',
mounted: function() {
var childSpanClassAttr = this.$refs.someName.getAttribute('class');
console.log('<span> was declared with "class" attr -->', childSpanClassAttr);
}
})<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<div id="app">
Parent.
<span ref="someName" class="abc jkl xyz">Child Span</span>
</div>$refsand v-for
$refs和 v-for
Notice that when used in conjunction with v-for, the this.$refs.someNamewill be an array:
请注意，当与 结合使用时v-for，this.$refs.someName将是一个数组：
new Vue({
el: '#app',
data: {
ages: [11, 22, 33]
},
mounted: function() {
console.log("<span> one's text....:", this.$refs.mySpan[0].innerText);
console.log("<span> two's text....:", this.$refs.mySpan[1].innerText);
console.log("<span> three's text..:", this.$refs.mySpan[2].innerText);
}
})span { display: inline-block; border: 1px solid red; }<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<div id="app">
Parent.
<div v-for="age in ages">
<span ref="mySpan">Age is {{ age }}</span>
</div>
</div>回答by Dominik Dosoudil
In Vue2be aware that you can access this.$refs.uniqueNameonly after mounting the component.
请注意，在Vue2中，您只能在挂载组件后才能访问this.$refs.uniqueName。
回答by Turna
Vue 2.x
Vue 2.x
For Official information:
官方信息：
https://vuejs.org/v2/guide/migration.html#v-el-and-v-ref-replaced
https://vuejs.org/v2/guide/migration.html#v-el-and-v-ref-replaced
A simple Example:
一个简单的例子：
On any Element you have to add an attribute ref="foo"
在任何元素上，您都必须添加一个属性 ref="foo"
<input ref="foo" type="text" >
To target the this elemet use this.$refs.foo
针对这个 elemet 使用 this.$refs.foo
this.$refs.foo.focus(); // it will focus the input having ref="foo"
