$children を使用して Vue の子コンポーネント インスタンスにアクセスする方法

$children を使用して Vue のサブコンポーネント インスタンスにアクセスする方法

Vue は、MVVM モード向けの JavaScript フレームワークであり、応答性の高いデータの作成やビューの制御などに便利な API を多数提供しています。その中でも、コンポーネントは Vue の重要な概念であり、コードをよりモジュール化し、再利用可能にし、保守を容易にすることができます。

Vue では、各コンポーネントに独自のインスタンスがあり、これを通じてアクセスできます。ただし、子コンポーネントのインスタンスにアクセスする場合は、$children 属性を使用する必要があります。この記事では、$children を使用して子コンポーネントのインスタンスにアクセスする方法を紹介します。

#$children 属性の意味

$children 属性は、現在のコンポーネント内のすべての直接の子コンポーネントを含む配列です。たとえば、親コンポーネントでは、次の方法で子コ​​ンポーネントのインスタンスにアクセスできます。

this.$children[index]

ここで、

index は、$children 配列内の子コンポーネントのインデックス値です。 、 0 から始まります。

$children 属性には直接の子コンポーネントのみが含まれ、孫コンポーネントやより深いコンポーネントは含まれないことに注意してください。すべての子孫コンポーネントにアクセスしたい場合は、再帰を使用してコンポーネント ツリー全体を走査できます。

ref 属性を使用した子コンポーネント インスタンスへのアクセス

$children 属性の使用に加えて、親の ref 属性を使用して子コンポーネント インスタンスにアクセスすることもできます。成分。 ref 属性は、任意のコンポーネントまたは要素に一意の識別子を割り当てることができ、これを介して、対応するコンポーネントまたは要素に直接アクセスできます。

サブコンポーネントに ref 属性を追加します:

<template>
  <div ref="child">这是一个子组件</div>
</template>

親コンポーネントの $refs 属性を通じてサブコンポーネント インスタンスにアクセスします:

this.$refs.child

$refs は属性はオブジェクトであり、その属性は各 ref 属性の識別子であり、属性値は実際のコンポーネントまたは要素に対応します。

$children 属性と比較して、$refs 属性は、インデックス値を知らなくても任意のコンポーネントまたは要素に追加できるため、より柔軟で使いやすいです。ただし、$refs 属性は間接サブコンポーネントにアクセスできないため、名前の競合を避けるために注意する必要があります。

サンプル コード

次に、親コンポーネント内の子コンポーネント インスタンスにアクセスする方法を示す簡単なサンプル コードを示します。

子コンポーネント:

<template>
  <div ref="child">这是一个子组件</div>
</template>

<script>
export default {
  name: 'ChildComponent'
}
</script>

親コンポーネント:

<template>
  <div>
    <child-component ref="child"></child-component>
  </div>
</template>

<script>
import ChildComponent from '@/path/to/ChildComponent.vue'

export default {
  name: 'ParentComponent',
  components: {
    ChildComponent
  },
  mounted() {
    console.log(this.$children[0]) // 访问第一个子组件实例
    console.log(this.$refs.child) // 通过ref属性访问子组件实例
  }
}
</script>

上記のコードでは、子コンポーネント

ChildComponent が親コンポーネントに導入され、6520631531c208a38051e59cee36c278 タグは、子コンポーネントを追加します。 ref 属性は子コンポーネントに追加され、親コンポーネントの $refs 属性を通じてアクセスできます。 $children と $refs は、親コンポーネントのマウントされたフック関数に出力され、子コンポーネントのインスタンスにアクセスする方法を示します。

概要

Vue では、$children 属性と $refs 属性の両方を使用して子コンポーネント インスタンスにアクセスできます。 $children 属性は比較的単純で、インデックス値を介してサブコンポーネントに直接アクセスできますが、間接的なサブコンポーネントにはアクセスできません。$refs 属性はより柔軟で、任意のコンポーネントまたは要素に一意の識別子を追加でき、より深くネストされたコンポーネントまたは要素にアクセスできます。 。実際の開発では、状況に応じてどの方法を選択するか柔軟に選択できます。

以上が$children を使用して Vue の子コンポーネント インスタンスにアクセスする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。