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

在Vue2中，provide和inject是一种父组件向子组件传递数据的方式，它们的使用步骤如下：

1. 在父组件中使用provide属性提供数据，代码如下：

export default {
  provide () {
    return {
      userInfo: {
        name: 'John',
        age: 18
      }
    }
  }
}

2. 在子组件中使用inject属性注入数据，代码如下：

export default {
  inject: ['userInfo'],
  mounted () {
    console.log(this.userInfo.name)  // 'John'
    console.log(this.userInfo.age)   // 18
  }
}

在上述代码中，父组件提供了一个名为userInfo的数据对象，该对象包含了子组件所需的数据。在子组件中，使用inject属性将父组件提供的数据注入到组件实例中，然后在mounted生命周期函数中访问注入的数据。

这种方式使得父组件和子组件之间的耦合度降低，提高了组件的可复用性和扩展性。同时，也避免了多层组件嵌套时数据传递的烦琐问题。

在Vue2中，provide和inject提供了一种依赖注入的方式，可以方便的在组件之间共享数据。下面是一个具体的案例：

假设我们有一个父组件A和一个子组件B，我们想要在子组件B中使用父组件A中的一个变量。我们可以使用provide在父组件中提供该变量，然后在子组件中使用inject注入该变量。

父组件A：

<template>
  <div>
    <p>父组件A</p>
    <child></child>
  </div>
</template>

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

export default {
  name: 'parent',
  provide: {
    message: 'Hello World'
  },
  components: {
    Child,
  }
}
</script>

子组件B：

<template>
  <div>
    <p>子组件B</p>
    <p>接收到的数据：{{ data }}</p>
  </div>
</template>

<script>
export default {
  name: 'child',
  inject: ['message'],
  data () {
    return {
      data: this.message  // 从父组件中接收到的数据
    }
  }
}
</script>

在父组件A中，我们使用provide提供一个名为message的变量，并将其设置为"Hello World"。在子组件B中，我们使用inject注入名为message的变量，然后在data中使用该变量。这样就可以在子组件B中访问父组件A中的数据了。