Vue ドキュメントの refs 属性を使用してコンポーネント インスタンスを取得する方法の詳細な説明

Vue.js は、フロントエンド フレームワークとして、近年フロントエンド開発の分野で広く使用されるようになりました。 Vue の公式ドキュメントには、多くの役立つ開発ガイドやヒントが記載されています。その中でも、コンポーネントのインスタンスを取得するメソッドの一つであるrefs属性について、今回は詳しく学習していきます。

refs 属性の基本概念

refs は Vue.js のプロパティで、コンポーネント内の DOM ノードまたはサブコンポーネント インスタンスを取得するために使用されます。これは、親コンポーネント内の子コンポーネントの DOM 要素、メソッド、プロパティにアクセスし、子コンポーネントと直接対話するのに役立ちます。 refs 属性を使用すると、props やイベントを介してデータやメソッドを渡すことなく、子コンポーネント内のデータやメソッドに直接アクセスできます。

refs 属性の使用法

refs 属性の基本的な使用法は次のとおりです:

<template>
  <div>
    <!-- 用ref属性绑定DOM节点或子组件 -->
    <input ref="inputBox" type="text"/>
    <ChildComponent ref="childComponent"/>
  </div>
</template>

上記のテンプレートでは、DOM ノードまたはサブノードに ref 属性を追加できます。 -component ref 属性を追加してインスタンスを取得します。この時点で、親コンポーネントまたは Vue インスタンスで this.$refs を使用して、それらのインスタンスにアクセスできます。

export default {
  mounted() {
    // 访问inputBox实例
    this.$refs.inputBox.focus();

    // 访问childComponent实例
    this.$refs.childComponent.doSomething();
  }
}

マウントされたフックでは、this.$refs を通じてサブコンポーネント インスタンスにアクセスし、そのメソッドとプロパティを取得できます。たとえば、上記のコードでは、this.$refs.inputBox を通じて入力ボックスのインスタンスにアクセスし、その focus() メソッドを呼び出すことができ、同様に、this.$refs.childComponent を通じて子コンポーネントのインスタンスにアクセスできます。それを呼び出します。 doSomething() メソッドを呼び出します。

さらに、 refs 属性は [ref v-for] を通じて配列を作成し、各 ref を配列内の各要素にバインドすることもできます。

<template>
  <div>
    <!-- 用ref属性绑定DOM节点或子组件 -->
    <div v-for="i in 5" :key="i" :ref="'item'+i">{{ i }}</div>
  </div>
</template>

上記のテンプレートでは、v-for 命令を使用して配列を走査し、各要素が数値を生成します。次に、この数値を ref 属性で使用して配列を作成し、それらを各要素に個別にバインドできます。

export default {
  mounted() {
    // 访问Ref数组中的元素
    console.log(this.$refs.item1.innerHTML); // 1
    console.log(this.$refs.item2.innerHTML); // 2
    console.log(this.$refs.item3.innerHTML); // 3
    console.log(this.$refs.item4.innerHTML); // 4
    console.log(this.$refs.item5.innerHTML); // 5
  }
}

上記のコードを通じて、各要素の innerHTML 属性、つまり出力 1、2、3、4、5 にアクセスできます。

概要

refs 属性は、Vue.js でコンポーネント インスタンスを取得するための重要なメソッドであり、サブコンポーネント内の DOM ノード、メソッド、プロパティに簡単にアクセスできるようになります。単純な Web ページを開発している場合でも、複雑な Web アプリケーションを開発している場合でも、refs 属性を使用してコードを簡素化し、開発効率を向上させることができます。

refs 属性は、子コンポーネントまたは要素に直接アクセスする必要がある場合にのみ使用する必要があることに注意してください。 2 つのコンポーネント間の通信を確立したい場合は、props と events を使用する方が適切です。

以上がVue ドキュメントの refs 属性を使用してコンポーネント インスタンスを取得する方法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。