我有一个组件,如何选择其中一个元素?
我正在尝试获取此组件模板中的输入。
可能有多个组件,因此queryselector必须只解析组件的当前实例。
Vue.component('somecomponent', {
template: '#somecomponent',
props: [...],
...
created: function() {
somevariablehere.querySelector('input').focus();
}
});
提前致谢
答案 0 :(得分:126)
v-el:el:uniquename
已被ref="uniqueName"
取代。然后通过this.$refs.uniqueName
访问该元素。
答案 1 :(得分:74)
您可以使用this.$children
访问vuejs组件的子级。如果要在当前组件实例上使用查询选择器,则this.$el.querySelector(...)
只需执行简单的console.log(this)
即可显示vue组件实例的所有属性。
另外,如果您知道要在组件中访问的元素,则可以向其添加v-el:uniquename
指令并通过this.$els.uniquename
答案 2 :(得分:33)
在 Vue2 中,请注意,只有在安装组件后才能访问 this。$ refs.uniqueName 。
答案 3 :(得分:26)
答案没有说清楚:
使用 this.$refs.someName
,但是,为了使用它,您必须在父中添加ref="someName"
。
见下面的演示。
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/vue@2.5.13/dist/vue.min.js"></script>
<div id="app">
Parent.
<span ref="someName" class="abc jkl xyz">Child Span</span>
</div>
$refs
和v-for
请注意,与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/vue@2.5.13/dist/vue.min.js"></script>
<div id="app">
Parent.
<div v-for="age in ages">
<span ref="mySpan">Age is {{ age }}</span>
</div>
</div>
答案 4 :(得分:4)
有关官方信息:
https://vuejs.org/v2/guide/migration.html#v-el-and-v-ref-replaced
一个简单的示例:
您必须在任何元素上添加具有唯一值
的属性ref
<input ref="foo" type="text" >
使用this.$refs.foo
this.$refs.foo.focus(); // it will focus the input having ref="foo"
答案 5 :(得分:2)
Template refs部分介绍了如何进行统一:
ref="myEl"
; :ref=
和v-for
const myEl = ref(null)
并从setup
中公开它该引用从安装开始便带有DOM元素。