Vue のレベル間でデータを渡すために Provide と Inject を使用するためのヒント

provide と inject を使用して Vue のレベル間でデータを転送するヒント

Vue の開発では、コンポーネント間でのデータ転送は非常に一般的な要件です。通常、props メソッドと Emit メソッドを使用してコンポーネント間でデータを転送できますが、コンポーネント間に複数のレベルのネストがある場合、この方法はより煩雑になり、コード結合が非常に簡単に発生します。このとき、Vue での Provide と Inject が便利です。

provide と inject は、Vue バージョン 2.2.0 で導入された新機能です。これら 2 つの API は、レイヤーごとにデータを渡す操作を簡単に実装できます。次の例では、複数レベルのネストされたコンポーネントの例を使用して、provide と inject を使用してデータのクロスレベル転送を実現する方法を示します。

次の多層ネストされたコンポーネントがあるとします。

<template>
  <div>
    <child1></child1>
  </div>
</template>

<script>
import child1 from './child1.vue';
export default {
  components: {
    child1
  }
};
</script>

<template>
  <div>
    <child2></child2>
  </div>
</template>

<script>
import child2 from './child2.vue';
export default {
  components: {
    child2
  }
};
</script>

<template>
  <div>
    <p>{{message}}</p>
    <grandchild></grandchild>
  </div>
</template>

<script>
import grandchild from './grandchild.vue';
export default {
  data() {
    return {
      message: 'Hello Vue!'
    };
  },
  components: {
    grandchild
  }
};
</script>

<template>
  <div>
    <p>{{message}}</p>
  </div>
</template>

<script>
export default {
  inject: ['message']
};
</script>

この例では、親コンポーネントで定義されたメッセージ データを孫コンポーネントで取得したいと考えています。具体的な実装方法は次のとおりです。

親コンポーネントの Provide 属性を使用して、渡す必要があるデータを提供します。

<template>
  <div>
    <child1 :message="message"></child1>
  </div>
</template>

<script>
export default {
  provide: {
    message: 'Hello Vue!'
  }
};
</script>

孫コンポーネントの inject 属性を使用して、 Provide によって提供されるデータ:

<template>
  <div>
    <p>{{message}}</p>
  </div>
</template>

<script>
export default {
  inject: ['message']
};
</script>

このようにして、孫コンポーネントは、親コンポーネントで提供されるメッセージ データを簡単に取得できます。

provide と inject で固定データを使用することに加えて、provide と inject のメソッドを使用してデータを提供および取得することもできます。たとえば、メッセージ データを動的に設定するメソッドを親コンポーネントに提供します。

<template>
  <div>
    <child1 :set-message="setMessage"></child1>
  </div>
</template>

<script>
export default {
  provide() {
    return {
      setMessage: message => {
        this.message = message;
      }
    };
  },
  data() {
    return {
      message: 'Hello Vue!'
    };
  }
};
</script>

Child1 コンポーネントの setMessage メソッドを呼び出して、メッセージ データを設定します。

<template>
  <div>
    <child2 :message="message"></child2>
    <button @click="setMessage">Set Message</button>
  </div>
</template>

<script>
export default {
  props: ['setMessage'],
  data() {
    return {
      message: 'Hello World!'
    };
  }
};
</script>

inject 属性を通じて setMessage を挿入します。孫コンポーネント内 メソッド:

<template>
  <div>
    <p>{{message}}</p>
    <button @click="setMessage">Set Parent Message</button>
  </div>
</template>

<script>
export default {
  inject: ['setMessage', 'message']
};
</script>

このようにして、孫コンポーネントは親コンポーネントの setMessage メソッドを呼び出して、メッセージ データを動的に設定できます。

概要:

provide 属性と inject 属性を使用すると、レベル間でデータを渡すという目的を簡単に達成できます。これら 2 つのプロパティを使用するときは、コードの単純さと保守性の目標を達成するために、深いネストとコンポーネントの結合を避けるように注意する必要があります。

以上がVue のレベル間でデータを渡すために Provide と Inject を使用するためのヒントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。