Vue での Provide/Inject について学ぶ

この記事は、Vue での Provide/Inject についての学習を共有します。困っている友人のお役に立てれば幸いです

前書き

最近、element-ui のソース コードを見ていて、そのような属性を見つけました: inject を確認してください。公式ウェブサイトの Provider/inject

provider/inject: 簡単に言うと、親コンポーネントの Provider を通じて変数が提供され、子コンポーネントの Inject を通じて変数が注入されます。

サブコンポーネントがどれほど深くても、inject が呼び出されている限り、プロバイダー内のデータを注入できることに注意してください。現在の親コンポーネントの prop 属性からのみデータを取得することに限定されるのではなく。

私たちの推測を検証してみましょう:

• 最初に: 親コンポーネントを定義します

<template>
  <p>
<childOne></childOne>
  </p>
</template>

<script>
  import childOne from &#39;../components/test/ChildOne&#39;
  export default {
    name: "Parent",
    provide: {
      for: "demo"
    },
    components:{
      childOne
    }
  }

ここでは、親コンポーネントでこの変数を指定します。

• 2番目はサブコンポーネントを定義します

<template>
  <p>
    {{demo}}
    <childtwo></childtwo>
  </p>
</template>

<script>
  import childtwo from &#39;./ChildTwo&#39;
  export default {
    name: "childOne",
    inject: [&#39;for&#39;],
    data() {
      return {
        demo: this.for
      }
    },
    components: {
      childtwo
    }
  }
</script>

• 3番目は別のサブコンポーネントを定義します

<template>
  <p>
    {{demo}}
  </p>
</template>

<script>
  export default {
    name: "",
    inject: [&#39;for&#39;],
    data() {
      return {
        demo: this.for
      }
    }
  }
</script>

2つのサブコンポーネントでは、jnjectを使用してprovideによって提供される変数を注入し、それをデータ属性に提供します。

ここの公式 Web サイトには、サンプルは Vue 2.2.1 以降でのみ動作すると記載されています。このバージョンより下では、注入された値は props と data が初期化された後に取得されます。

実行後に結果を確認してください

上記の例からわかるように、親コンポーネント内で呼び出されている限り、すべての子コンポーネントは親コンポーネントのライフサイクル中に Inject を呼び出すことができます。親コンポーネントからの値。

関連する推奨事項:

vue 2 Bus.js を使用して非親子コンポーネント通信を実装する

vue.js と webpack に基づくチャットの例

Vue.js のベスト プラクティス (作成するための 5 つのヒント)あなたは Vue マスター)

以上がVue での Provide/Inject について学ぶの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。