Vue privide 和inject 依赖注入的使用详解

Vue中，provide和inject是实现依赖注入的两个函数。在组件树中，父组件可以通过provide提供一些数据或方法，子组件可以通过inject来注入这些数据或方法。

在使用provide向下传递时，我们可以把需要传下去的属性或方法放在一个对象中。如下面的例子：

// Parent.vue
<template>
  <div>
    <child :title="title"></child>
  </div>
</template>

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

export default {
  components: {
    Child
  },
  provide() {
    return {
      title: '我是标题'
    }
  }
}
</script>

// Child.vue
<template>
  <div>{{ title }}</div>
</template>

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

以上代码中，父组件通过provide向下传递了一个title属性，并提供了一个固定值。在子组件中，我们使用inject注入provide提供的title属性，将其值渲染到模板中。

另一个示例，如下：

// Grandparent.vue
<template>
  <div>
    <parent></parent>
  </div>
</template>

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

export default {
  components: {
    Parent
  },
  provide() {
    return {
      sayHello: this.sayHello
    }
  },
  methods: {
    sayHello() {
      console.log('Hello from Grandparent component')
    }
  }
}
</script>

// Parent.vue
<template>
  <div>
    <child></child>
  </div>
</template>

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

export default {
  components: {
    Child
  },
  inject: ['sayHello']
}
</script>

// Child.vue
<template>
  <button @click="sayHello">Say Hello</button>
</template>

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

以上代码中，我们提供了一个sayHello方法， 并向下传递了该方法。 在Child.vue中，我们注入了该方法，并在按钮上添加了事件，以响应按钮的点击事件，并在控制台上输出“Hello from Grandparent component”。

总结一下，Vue中provide和inject是实现依赖注入的两个函数，可以在一个父组件上提供数据或方法，然后在子组件中通过inject注入使用。这种方式可以帮助我们在父子组件之间完成数据或方法的传递和共享，使代码更加简洁和易于维护。