首页 文章

VueJs在组件中获取元素

提问于
浏览 次
60

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

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

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

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

   ...

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

提前致谢

vue.js

4 回答

  • 20

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

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

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

    回复于
  • 105

    在vuejs 2中， v-el:el:uniquename 已被 ref="uniqueName “替换 . ”然后通过 this.$refs.uniqueName 访问该元素 .

    回复于
  • 30

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

    回复于
  • 62

    答案没有说清楚：

    使用 this.$refs.someName ，但是，为了使用它，您必须 add ref="someName" in the parent .

    见下面的演示 .

    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>
    回复于

相关问题