Javascript Vue.js获取组件中的元素

我有一个组件，如何选择其中一个元素

我正在尝试获取此组件模板中的输入

可能有多个组件，因此querySelector只能解析组件的当前实例

Vue.component'somecomponent'{ 模板：“somecomponent”， 道具：[……]， ... 创建：函数{ somevariablehere.querySelector'input'。焦点； } };

---

您可以使用此。$children访问vuejs组件的子级。如果要在当前组件实例上使用查询选择器，则此。$el.querySelector

只需执行一个简单的console.log这将向您显示vue组件实例的所有属性

此外，如果您知道要在组件中访问的元素，则可以向其添加v-el:uniquename指令，并通过此命令访问它。$els.uniquename

vuejs 2

---

v-el:el:uniquename已被ref=uniquename替换。然后在Vue2中通过此访问元素。$refs.uniqueName。

请注意，只有在安装组件后才能访问此。$refs.uniqueName。

答案并不清楚：

使用此项。$refs.someName，但要使用它，必须在父项中添加ref=someName

请参阅下面的演示

新Vue{ el:“应用程序”， 安装：功能{ var childSpanClassAttr=this.$refs.someName.getAttribute'class'； console.log已用类attr->声明，childSpanClassAttr； } } 父母亲 子跨度 VUE2.x 有关官方信息：

一个简单的例子：

在任何元素上，都必须添加具有唯一值的属性ref

合成原料药 第节说明了如何统一这一点：

在模板中，使用ref=myEl；：ref=带v形代表 在脚本中，使用const myEl=refnull并从安装程序中公开它

---

引用从装载开始就携带DOM元素。

这帮助我认识到ref属性适用于任何HTML元素或Vue组件。好东西。看起来是这样的。$refs.uniqueName是一个数组，所以您需要使用它。$refs.uniqueName[0]来获取引用的元素。仅在装入组件之后，这可以在父级的装入方法中完成：在Vue的生命周期中装入之前的所有内容都不会显示在浏览器中。由于尚未装入，因此没有可用的DOM。提示：在装入之前，$el是未定义的。如果您想初始化一个变量，请在mount中执行该操作，同时注意reffed项不是被动的，这一点也很重要；不可能吗？不，不可能。但在这里，您可以从文档根开始查询。由于您正在制作一个组件，它应该很可能从组件中的一个节点开始。好的，比如，header是nav的父节点，然后const headerell=ref，然后您可以执行const links=headerell.value.querySelectorAll'nav>ul>li'

<input ref="foo" type="text" >

this.$refs.foo.focus(); // it will focus the input having ref="foo"