VueJs在组件中获取元素

Question

我有一个组件,我该如何选择其中一个元素？

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

可能有多个组件,因此queryselector必须只解析组件的当前实例.

Vue.component('somecomponent', {
    template: '#somecomponent',
    props: [...],

   ...

    created: function() {
        somevariablehere.querySelector('input').focus();
    }
});

提前致谢

Answer 1

vuejs 2

v-el:el:uniquename已被取代ref="uniqueName".然后通过访问该元素this.$refs.uniqueName.

Answer 2

你可以访问vuejs组件的子节点this.$children.如果要在当前组件实例上使用查询选择器this.$el.querySelector(...)

只是做一个简单的console.log(this)将显示vue组件实例的所有属性.

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

Answer 3

答案没有说清楚:

使用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>

Answer 4

在Vue2中,请注意,只有在安装组件后才能访问.$ refs.uniqueName.

Answer 5

合成API

模板参考部分讲述了这是如何统一的：

• 在模板内，使用ref="myEl"; :ref=与一个v-for
• 在脚本中，有一个const myEl = ref(null)并将其公开setup

该引用携带着从安装开始的 DOM 元素。

Answer 6

Vue 2.x

官方信息：

https://vuejs.org/v2/guide/migration.html#v-el-and-v-ref-replaced

一个简单的例子：

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

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

以该 elemet 使用为目标 this.$refs.foo

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