Vue での Provide/Inject のユースケース分析

今回はvueでのprovide/injectのユースケース分析をお届けします。vueでprovide/injectを使用する際の注意事項は何ですか?以下は実際のケースですので見てみましょう。

まえがき

最近、element-uiのソースコードを見ていたら、

attribute:injectという記述を見つけたので、公式サイトを確認してみました。 Provider/inject

provider/inject: 簡単に言うと、

変数を提供するには、親コンポーネントでプロバイダーを渡し、子コンポーネントでの inject を通じて変数を注入します。

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

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

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

<template>
 <p>
<childOne></childOne>
 </p>
</template>
<script>
 import childOne from '../components/test/ChildOne'
 export default {
  name: "Parent",
  provide: {
   for: "demo"
  },
  components:{
   childOne
  }
 }

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

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

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

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

<template>
 <p>
  {{demo}}
 </p>
</template>
<script>
 export default {
  name: "",
  inject: ['for'],
  data() {
   return {
    demo: this.for
   }
  }
 }
</script>

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

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

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

上記の例からわかるように、親コンポーネント内で呼び出されている限り、親コンポーネントの

ライフサイクル内で、すべての子コンポーネントはinjectを呼び出すことができます。 . 親コンポーネントから値を注入します。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨書籍:

JavaScript DOM 要素を追加、削除、変更する手順の詳細な説明

Vue は vee-validate を使用してフォームを詳細に検証します

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