Vue.js 获取组件中的元素
我有一个组件，如何选择其中一个元素？
我正在尝试获取此组件模板中的输入。
可能有多个组件，因此 querySelector 只能解析组件的当前实例。
Vue.component('somecomponent', {
template: '#somecomponent',
props: [...],
...
created: function() {
somevariablehere.querySelector('input').focus();
}
});
Vuejs 2
v-el:el:uniquename 已替换为 ref="uniqueName"。然后通过 this.$refs.uniqueName 访问该元素。
根据您要访问的内容，有几个选项：
您可以使用 this.$children 访问 Vue.js 组件的子组件
您可以使用 ref="uniqueName" 标记模板中的特定 DOM 元素，并稍后通过 this.$refs.uniqueName 引用这些元素（但请记住，在组件/应用程序完成安装和执行初始渲染）
如果您无法标记您的元素，您可以使用 CSS 选择器通过 this.$el.querySelector('.myClass > .childElement') 查询 DOM 的子元素（如上所述，组件/应用程序需要完成安装）
您还可以通过在组件中执行一个简单的 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(' 被声明为 "class" attr - ->', childSpanClassAttr); } })
$refs 和 v-for
请注意，当与 v-for 一起使用时，this.$refs.someName 将是一个数组：
new Vue({ el: '#app', data: {ages: [11, 22, 33] },mounted: function() { console.log(" one's text....:", this. $refs.mySpan[0].innerText); console.log(" two's text....:", this.$refs.mySpan[1].innerText); console.log(" three's text..:", this.$refs.mySpan[2].innerText); } }) span { display: inline-block;边框：1px 纯红色； }
在 Vue2 中，请注意只有在安装组件后才能访问 this.$refs.uniqueName。
Vue 2.x
官方信息：
https://v2.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"
组合 API
Template refs 部分说明了这是如何统一的：
在模板中，使用 ref="myEl"; :ref= 带有 v-for
在脚本中，有一个 const myEl = ref(null) 并从设置中公开它
引用携带从安装开始的 DOM 元素。
document.querySelectorAll("nav > ul > li"); 这样的查询是不可能的吗？
<header ref="headerEL">，其中 header 是 nav 的父级，然后是 const headerEl = ref<HTMLElement>()，然后您可以执行 const links = headerEl.value.querySelectorAll('nav > ul > li')
关注公众号
不定期副业成功案例分享
ref属性适用于任何 HTML 元素或 Vue 组件。好东西。