Vue の ref とはどういう意味ですか?

Vue の ref 属性を使用すると、開発者は DOM 要素またはコンポーネントのインスタンスにアクセスできます。用途には、フォーカスの設定や値の取得など、DOM 要素を直接操作することが含まれます。コンポーネントのインスタンスにアクセスしてデータを取得したり、メソッドを呼び出したりします。親子通信など、コンポーネント間の関係を確立します。 Vue の

ref

ref は Vue.js の重要な機能であり、開発者が DOM にアクセスできるようになります。コンポーネントの要素またはインスタンス。

Uses

ref は、次のシナリオで使用できます。

• DOM 要素を直接操作する (フォーカスの設定や取得など)。価値。
• データの取得やメソッドの呼び出しなど、コンポーネント インスタンスにアクセスします。
• 参照を使用して親子コンポーネント通信を作成するなど、コンポーネント間の関係を確立します。

#Syntax

ref は次の方法で使用できます:

<code class="html"><template>
  <input ref="myInput" />
</template>

<script>
export default {
  mounted() {
    // 获取 DOM 元素
    this.$refs.myInput.focus();
  }
};
</script></code>

Assignment

ref テンプレートまたはスクリプトで使用されるかどうかに応じて、DOM 要素またはコンポーネントのインスタンスに割り当てられます。

テンプレートでは、ref は DOM 要素を指します。
• スクリプトでは、ref はコンポーネントのインスタンスを指します。

アクセス

$refs オブジェクトを通じて ref にアクセスできます:

<code class="js">this.$refs.myInput // 返回 DOM 元素
this.$refs.myComponent // 返回组件实例</code>

Note

参照名は一意である必要があります。
• Ref は、DOM レンダリングが完了した後にのみ使用できます。
• ref は、非同期コンポーネントまたは機能コンポーネントでは使用できません。

以上がVue の ref とはどういう意味ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。