How to use provide/inject in Vue to transfer data between ancestor components and descendant components

In Vue, we often need to transfer data between components. When passing data between ancestor components and descendant components, we can use provide/inject provided by Vue.

1. The role of provide/inject

In Vue, provide and inject are a pair of APIs used for data transfer between ancestors and descendants.

Specifically, provide is used to define some data/methods that need to be shared in ancestor components, while inject is used to inject these data/methods into descendant components.

In this way, the data/methods provided in the ancestor component can be used by the descendant component, thus realizing data transfer well.

2. Use of provide/inject

Now, let’s take a look at how to use provide/inject.

In the ancestor component, we can use provide to define the data/methods that need to be shared, for example:

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

In this example, we define a theme variable and a changeTheme method, and They are shared to descendant components through provide.

In descendant components, we can use inject to receive these data/methods, for example:

inject: ['theme', 'changeTheme']

In this example, we receive the two data theme and changeTheme through inject /method.

In this way, we can use the two data/methods theme and changeTheme in descendant components.

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

It should be noted that when using inject to inject data/methods, we do not have to name them the same as those defined by provide. We can choose a more semantic name as needed.

In addition, it should be noted that when using provide/inject, you need to ensure that the ancestor component is created before the descendant component, otherwise the data/method cannot be injected. This can generally be ensured by the order in which components are created.

3. Sample code

Now, let’s look at a complete sample code to better understand how to use provide/inject.

Parent component:

<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>

Child component:

<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>

In this example, we define a theme variable and a changeTheme method in the parent component, and use provide to They are shared with child components.

In the child component, we receive the two data/methods theme and changeTheme through inject, and change the theme color through the changeTheme method.

4. Summary

Using provide/inject can effectively achieve data transfer between ancestor components and descendant components. When using it, we only need to define the data/methods that need to be shared in the ancestor component, and then inject it in the descendant component.

It should be noted that when using provide/inject, you need to ensure that the ancestor component is created before the descendant component, otherwise the data/method cannot be injected.

The above is the detailed content of How to use provide/inject in Vue to transfer data between ancestor components and descendant components. For more information, please follow other related articles on the PHP Chinese website!