$refsの使い方

今回は$refsの使い方と注意点を紹介します。以下は実際的なケースですので見ていきましょう。

一般的に、DOM 要素を取得するには、document.querySelector(".input1") を実行して DOM ノードを取得し、次に input1 の値を取得する必要があります。 document.querySelector（".input1"）获取这个dom节点，然后在获取input1的值。

但是用ref绑定之后，我们就不需要在获取dom节点了，直接在上面的input上绑定input1，然后$refs里面调用就行。

然后在javascript里面这样调用：this.$refs.input1 这样就可以减少获取dom节点的消耗了

用法如下:

HTML:

<p id="app">
  <input type="text" ref="input1"/>
  <button @click="add">添加</button>
</p>

JS:

<script>
new Vue({
  el: "#app",
  methods:{
  add:function(){
    this.$refs.input1.value ="test"; //this.$refs.input1 减少获取dom节点的消耗
    }
  }
})
</script>

下面给大家介绍下vue $refs的基本用法，具体代码如下所示：

<p id="app">
  <input type="text" ref="input1"/>
  <button @click="add">添加</button>
</p>
<script>
new Vue({
  el: "#app",
  methods:{
  add:function(){
    this.$refs.input1.value ="22"; //this.$refs.input1 减少获取dom节点的消耗
    }
  }
})
</script>

一般来讲，获取DOM元素，需document.querySelector（".input1"）

しかし、ref でバインドした後、dom ノードを取得する必要はありません。input1 を上記の入力に直接バインドし、それを $refs で呼び出すことができます。

次に、これを JavaScript で呼び出します: this.$refs.input1 これにより、dom ノードの取得の消費を減らすことができます

使用方法は次のとおりです:

HTML:

rrreee

JS:rrreeeBelow vue $refs の基本的な使い方を紹介します。具体的なコードは次のとおりです。
rrreee

一般的に、DOM 要素を取得するには、document.querySelector(".input1") が必要です。この dom ノードを取得し、input1 の値を取得します。

しかし、ref でバインドした後は、dom ノードを取得する必要はなくなり、input1 を上記の入力に直接バインドして、それを $refs で呼び出すことができます。
次に、JavaScript で this.$refs.input1 を呼び出します。これにより、dom ノードの取得にかかる消費量が減ります。

🎜 この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、その他の情報に注意してください。関連記事はPHP中国語サイトにあります！ 🎜🎜推奨読書: 🎜🎜🎜レンダリングできない子コンポーネントへの親コンポーネントのメソッド更新の処理🎜🎜🎜🎜🎜 vuex を使用して状態オブジェクトを操作する方法🎜🎜🎜

以上が$refsの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。