コンポーネントがありますが、その要素の1つを選択するにはどうすればよいですか？

このコンポーネントのテンプレート内にある入力を取得しようとしています。

複数のコンポーネントが存在する可能性があるため、queryselectorはコンポーネントの現在のインスタンスのみを解析する必要があります。

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

   ...

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

前もって感謝します

を使用して、vuejsコンポーネントの子にアクセスできますthis.$children。現在のコンポーネントインスタンスでクエリセレクタを使用する場合this.$el.querySelector(...)

単純な操作console.log(this)を行うだけで、Vueコンポーネントインスタンスのすべてのプロパティが表示されます。

さらに、コンポーネントでアクセスしたい要素がわかっている場合は、それにv-el:uniquenameディレクティブを追加してアクセスできます。this.$els.uniquename

vuejs 2

v-el:el:uniquenameはに置き換えられましたref="uniqueName"。次に、要素はを介してアクセスされthis.$refs.uniqueNameます。

答えはそれを明確にしていません：

を使用します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あなたがアクセスできることに注意してくださいこれを。$ refs.uniqueName成分のみを実装した後。

Vue 2.x

公式情報：

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"

コンポジションAPI

テンプレート参照セクションは、これがどのように統合されたかを示しています。

• テンプレート内では、を使用しref="myEl"ます。:ref=とともにv-for
• スクリプト内で、を持ち、const myEl = ref(null)それを公開しますsetup

参照は、マウント以降のDOM要素を保持します。