Vue2.0/3.0 での provide と inject の使用例

1. provide/inject の用途は何ですか?

よく使われる親子コンポーネントの通信方法は、親コンポーネントが子コンポーネントに渡すデータをバインドし、子コンポーネントが props 属性を通じてそれを受け取るというものです。コンポーネントの階層が多くなると、このように 1 レベルずつ値を渡すのは非常に面倒で、コードの可読性も高くなく、後々のメンテナンスにも不便です。

Vue は、複数レベルのネストされた通信の問題を解決するために provide と inject を提供します。 provide では、子孫コンポーネントに渡すデータを指定し、子孫コンポーネントは、inject を通じて祖父母コンポーネントから渡されたデータを挿入します。

使用シナリオ: Vue には $parent プロパティがあるため、子コンポーネントは親コンポーネントにアクセスできます。しかし、孫コンポーネントが祖先コンポーネントにアクセスするのは困難です。 provide/inject を使用すると、レベルをまたいで祖先コンポーネントのデータに簡単にアクセスできます。

2. provide/injectの使い方

provide: はオブジェクトを返すオブジェクト/関数です。

内部には属性と属性値があります。

注: 子孫レイヤーの提供は、祖父母レイヤーの提供の同じキーの属性値をカバーします。

挿入: 文字列の配列、またはオブジェクト。

属性値は、from および default のデフォルト値を含むオブジェクトにすることができます。From は、使用可能な注入コンテンツを検索するために使用されるキー (文字列またはシンボル) です。つまり、祖父のマルチレイヤー プロバイダーは大量のデータを提供し、from 属性は取得するキーを指定します。

default はデフォルト値を指定します。

具体的な使用法:

親コンポーネント

<テンプレート>
  <div>
 
  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  コンポーネント:
    マージヒントダイアログ、
    ブレイクネットヒント
  },
  データ （） {
    戻る {
      isShow: false、
      ルータが生きているかどうか: true
  },

// 親コンポーネントから返されて従属コンポーネントに渡されるデータは、関数またはデータ provide() 内のデータになります。
    戻る {
      リロード: this.reload isShow: this.isShow
    }
  },
  メソッド: {
    リロード（）{
      this.isRouterAlive = false
      this.$nextTick(() => {
        this.isRouterAlive = true
      })
    }
  }
}
</スクリプト>

子孫

<テンプレート>
  <ポップアップ割り当て
    :id="id"
    @success="成功ハンドル"
  >
    <div class="confirm-d-tit"><span class="gray-small-btn">{{ 名前 }}</span></div>
    <strong>割り当てられる</strong>
    <a
      スロット="参照"
      クラス="unite-btn"
    >
      割り当て
  </ポップアップ割り当て>
</テンプレート>
<スクリプト>
'../PopupAssign' から PopupAssign をインポートします
エクスポートデフォルト{
//vue リロードメソッドのコンテンツを参照 isShow
  挿入: ['reload','isShow'],
  コンポーネント:
    ポップアップ割り当て
  },
メソッド: {
    非同期の成功ハンドル（）{
      これをリロードします。
    }
  }
}
</スクリプト>

Vue3.0 の使用法

親コンポーネント

サブコンポーネント

要約する

これで、vue2.0/3.0 での provide と inject の使用に関するこの記事は終了です。vue での provide と inject の使用に関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。