Vue で Provide/Inject を使用して祖先コンポーネントと子孫コンポーネント間でデータを転送する方法

Vue では、コンポーネント間でデータを転送する必要があることがよくあります。祖先コンポーネントと子孫コンポーネント間でデータを受け渡す場合、Vue が提供する Provide/Inject を使用できます。

1. Provide/inject の役割

Vue では、provide と inject は祖先と子孫の間のデータ転送に使用される 1 対の API です。

具体的には、provide は祖先コンポーネントで共有する必要があるいくつかのデータ/メソッドを定義するために使用され、inject はこれらのデータ/メソッドを子孫コンポーネントに注入するために使用されます。

このようにして、祖先コンポーネントで提供されているデータ/メソッドを子孫コンポーネントで利用することができ、良好なデータ転送が実現されます。

2. Provide/inject の使い方

次に、provide/inject の使い方を見てみましょう。

祖先コンポーネントでは、provide を使用して、共有する必要があるデータ/メソッドを定義できます。例:

provide: {
  theme: 'blue',
  changeTheme: theme => {
    this.theme = theme
  }
}

この例では、テーマ変数とchangeThemeメソッドを定義します。それらは、provide を通じて子孫コンポーネントに共有されます。

子孫コンポーネントでは、inject を使用してこれらのデータ/メソッドを受け取ることができます。例:

inject: ['theme', 'changeTheme']

この例では、inject /method を通じて 2 つのデータ テーマとchangeTheme を受け取ります。

このようにして、2 つのデータ/メソッド テーマと changeTheme を子孫コンポーネントで使用できます。

this.theme // 获取theme变量的值
this.changeTheme('red') // 改变主题色

inject を使用してデータ/メソッドを注入する場合、provide で定義されたものと同じ名前を付ける必要はなく、必要に応じてよりセマンティックな名前を選択できることに注意してください。

さらに、provide/inject を使用する場合は、子孫コンポーネントよりも前に祖先コンポーネントが作成されていることを確認する必要があることに注意してください。そうしないと、データ/メソッドを注入できません。これは通常、コンポーネントが作成される順序によって保証されます。

3. サンプル コード

ここで、provide/inject の使用方法をよりよく理解するために、完全なサンプル コードを見てみましょう。

親コンポーネント:

<template>
  <div>
    <h3>当前主题色为{{theme}}</h3>
    <button @click="changeTheme('blue')">蓝色</button>
    <button @click="changeTheme('green')">绿色</button>
    <button @click="changeTheme('red')">红色</button>
    <hr>
    <child></child>
  </div>
</template>

<script>
import Child from './Child.vue'

export default {
  components: {
    Child
  },
  provide() {
    return {
      theme: this.theme,
      changeTheme: this.changeTheme
    }
  },
  data() {
    return {
      theme: 'blue'
    }
  },
  methods: {
    changeTheme(theme) {
      this.theme = theme
    }
  }
}
</script>

子コンポーネント:

<template>
  <div>
    <h3>我是子组件</h3>
    <p>当前主题色为：{{theme}}</p>
    <button @click="changeTheme('blue')">蓝色</button>
    <button @click="changeTheme('green')">绿色</button>
    <button @click="changeTheme('red')">红色</button>
  </div>
</template>

<script>
export default {
  inject: ['theme', 'changeTheme'],
  mounted() {
    console.log(this.theme) // blue
  },
  methods: {
    changeTheme(theme) {
      this.changeTheme(theme)
    }
  }
}
</script>

この例では、親コンポーネントでテーマ変数とchangeThemeメソッドを定義し、provideを使用します。子コンポーネントと共有されます。

子コンポーネントでは、inject を通じて 2 つのデータ/メソッドのテーマと changeTheme を受け取り、changeTheme メソッドを通じてテーマの色を変更します。

4. 概要

provide/inject を使用すると、祖先コンポーネントと子孫コンポーネント間のデータ転送を効果的に実現できます。これを使用する場合、祖先コンポーネントで共有する必要があるデータ/メソッドを定義し、それを子孫コンポーネントに注入するだけです。

provide/inject を使用する場合は、子孫コンポーネントの前に祖先コンポーネントが作成されていることを確認する必要があることに注意してください。そうしないと、データ/メソッドを注入できません。

以上がVue で Provide/Inject を使用して祖先コンポーネントと子孫コンポーネント間でデータを転送する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。