Vue が Ref を使用してレベル間でコンポーネントを取得する手順

VueはRefを使用してレベル間でコンポーネントインスタンスを取得します

例の紹介

開発プロセスでは、レベル間の参照インスタンスの取得が避けられません。ほとんどの場合、コンポーネント自体のparentまたはchildrenを通じて必要なインスタンスを見つけることができます。しかし、階層が不明瞭であったり深すぎたりすると、この方法は必然的に面倒で非効率的になります。

下の図に示すように、組件Eを使用して組件Dのコンポーネント インスタンスを取得します。

ドキュメントディレクトリ構造

コンポーネントはA、B、C、D、E、インデックスの6つあり、上図のコンポーネントの順序でそれぞれのページに挿入されます。

ページのスタイルは次のとおりです。

vue-refをインストールする

vue-ref をダウンロード

npm インストール vue-ref --save

グローバル登録

'vue-ref' から ref をインポートします
Vue.use(参照)

使い方

<!-- vm.dom は DOM ノードになります -->
<p v-ref="c => this.dom = c">こんにちは</p>

<!-- vm.child は子コンポーネントのインスタンスになります -->
<子コンポーネント v-ref="c => this.child = c"></子コンポーネント>

<span v-for="n in 10" :key="n" v-ref="(c, key) => {...}">{{ n }} </span>

ルート コンポーネントのカスタム メソッド [provide と inject を使用]

インデックス ページでは、次の 3 つのメソッドを提供しています。

• 子コンポーネントのインスタンスを設定する、setChildrenRef
• コンポーネントインスタンスから取得、getChildrenRef
• 現在のノードインスタンスを取得する、getRef

提供する（） {
  戻る {
   setChildrenRef: (名前、参照) => {
    this[name] = 参照
   },
   getChildrenRef: 名前 => {
    this[名前]を返す
   },
   参照を取得: () => {
    これを返す
   }
  }
 },

各ページを個別に説明する

コンポーネントAページ:

インジェクションメソッドを通じてsetChildrenRefメソッドを取得し、上記の指示を通じてコン​​ポーネントDをキャッシュします。

コンポーネントBページ:

コンポーネントCページ:

コンポーネントDページ:

コンポーネント E ページ:

このページでは、2 つのメソッドを挿入するだけでなく、コンポーネント D の色を切り替えるメソッドも設定して、レベル間でコンポーネント D のインスタンスを実際に取得したかどうかをテストします。

結果

ご覧のとおり、3 つの親インスタンスは同じであり、コンポーネント D のテキスト スタイルがコンポーネント E で正常に変更されています。良い！

上記は、Vue が Ref を使用してレベル間でコンポーネントを取得する手順の詳細です。Vue が Ref を使用してコンポーネントを取得する方法の詳細については、123WORDPRESS.COM の他の関連記事に注目してください。