vue.js での $refs の使用に関する簡単な説明 (コード付き)

関連する推奨事項: 「vue.js チュートリアル 」

• 説明: vm.$refs は、 object は、 ref

• を登録したすべてのサブコンポーネント (または HTML 要素) を保持します。 使用法: HTML 要素に ref 属性を追加し、 vm.$refs. 属性を渡します。 in JS To get

• 注: サブコンポーネントを取得している場合は、ref

# を通じてサブコンポーネント内のデータとメソッドを取得できます。 ## 一般に、DOM 要素を取得するには、

document.querySelector(".input1") dom ノードを取得し、次に input1 の値を取得する必要があります。

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

次に、これを JavaScript で呼び出します:

this.$refs.input1 これにより、dom ノードの取得にかかる消費量が削減されます。サンプル コードは次のとおりです。

<-- 添加ref属性 -->
<div id="app">
	<input type="text" ref="input1"/>
    <button @click="add">添加</button>
</div>

// 获取注册过 ref 的所有组件或元素
<script>
    new Vue({
        el: "#app",
        methods:{
        add:function(){
            this.$refs.input1.value ="22"; //this.$refs.input1  减少获取dom节点的消耗
            }
        }
    })
</script>

プログラミング関連の知識については、

プログラミング教育を参照してください。 ！

以上がvue.js での $refs の使用に関する簡単な説明 (コード付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。