vue3中依赖注入provide 和 inject是如何使用的具体案例

在Vue3中，provide和inject可以用来进行依赖注入，即在一个父组件中，将一些数据或方法传递给子组件，子组件中就可以直接使用这些数据或方法，而不需要通过props或事件来传递。

以下是一个具体的案例：

假设我们有一个App组件和一个Child组件，Child组件需要使用App组件中的一个数据和一个方法。

在App组件中，我们可以通过provide来提供这些数据和方法：

// App.vue

import { provide } from 'vue'

export default {
  data() {
    return {
      msg: 'Hello World'
    }
  },

  methods: {
    sayHello() {
      console.log('Hello!')
    }
  },

  setup() {
    provide('msg', this.msg)
    provide('sayHello', this.sayHello)
  }
}

我们使用provide来提供数据和方法，第一个参数表示提供的数据或方法的名字，第二个参数是提供的具体内容。

在Child组件中，我们可以通过inject来获取这些数据和方法：

// Child.vue

import { inject } from 'vue'

export default {
  setup() {
    const msg = inject('msg')
    const sayHello = inject('sayHello')

    return {
      msg,
      sayHello
    }
  },

  mounted() {
    console.log(this.msg) // 输出 'Hello World'
    this.sayHello() // 输出 'Hello!'
  }
}

我们使用inject来获取提供的数据和方法，第一个参数表示要获取的数据或方法的名字，这里需要和App组件中提供的名字相同。在Child组件的setup函数中，我们可以将获取到的数据和方法通过return返回，这样在组件中就可以直接使用了。在mounted函数中，我们可以打印出msg和执行sayHello方法来验证是否获取成功。

这就是一个简单的依赖注入的例子，在实际开发中，我们可以通过provide和inject来更方便地进行组件之间的通信和数据传递。