我有一个组件，如何选择其中一个元素？
我正在尝试获取此组件模板中的输入。
可能有多个组件，因此querySelector 只能解析组件的当前实例。
Vue.component('somecomponent', {
template: '#somecomponent',
props: [...],
...
created: function() {
somevariablehere.querySelector('input').focus();
}
});
【问题讨论】：
标签： javascript vue.js
v-el:el:uniquename 已替换为 ref="uniqueName"。然后通过this.$refs.uniqueName 访问该元素。
【讨论】：
ref 属性适用于任何 HTML 元素或 Vue 组件。好东西。
根据您要访问的内容，有几个选项：
您可以使用this.$children 访问 Vue.js 组件的子组件
您可以使用 ref="uniqueName" 标记模板中的特定 DOM 元素，稍后通过 this.$refs.uniqueName 引用这些元素
（但请记住，在组件/应用程序具有 finished mounting 并执行初始渲染之前，您将无法引用这些内容）
如果您无法为元素添加标签，您可以通过this.$el.querySelector('.myClass > .childElement')使用 CSS 选择器查询 DOM 中的子元素
（如上，组件/应用需要有finished mounting）
您也可以通过在您的组件中执行一个简单的console.log(this) 来进行探索，它会显示您的 Vue 组件实例的所有属性。
【讨论】：
this.$el 在挂载之前是未定义的。如果你想初始化一个变量，请在mount()
答案没有说清楚：
使用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>【讨论】：
在 Vue2 中，请注意只有在安装组件后才能访问 this.$refs.uniqueName。
【讨论】：
官方信息：
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"
【讨论】：
Template refs 部分讲述了这是如何统一的：
ref="myEl"； :ref= 和 v-for
const myEl = ref(null) 并从setup 公开它
引用携带从安装开始的 DOM 元素。
【讨论】：
document.querySelectorAll("nav > ul > li"); 这样的查询是不可能的吗？
<header ref="headerEL">，其中header是nav的父级，然后是const headerEl = ref<HTMLElement>()，然后你可以做const links = headerEl.value.querySelectorAll('nav > ul > li')