vue中的provide/inject依赖注入深层数据传递_vue2组件通信 有依赖注入吗

Vue中的provide/inject是一种依赖注入的机制，它允许父组件向子组件传递数据，而不需要通过props逐层传递。通过provide/inject可以实现以下功能：

1. 全局状态管理：通过在根组件中使用provide提供数据，其他子组件可以通过inject注入这些数据。这样可以实现全局共享的状态管理，避免了通过props传递数据的繁琐和层级嵌套的限制。

2. 跨层级通信：通过provide/inject可以实现跨层级组件之间的通信，不需要通过父子组件关系来传递数据。这对于一些无关联的组件之间的通信非常方便。

3. 插件扩展：通过provide/inject可以将一些插件或第三方库的实例注入到组件中，让组件可以直接使用这些功能。这样可以实现组件与插件的解耦，提高组件的复用性。

4. 主题配置：通过provide/inject可以将主题配置数据注入到组件中，让组件可以根据配置来自定义显示样式。

5. 路由信息共享：通过provide/inject可以将路由信息注入到子组件中，让子组件可以访问到当前路由的信息，如路径、参数等。

总体而言，provide/inject可以实现组件之间的数据共享、跨层级通信和插件扩展，提供了一种更灵活且方便的依赖注入方式。

一、vue2中

在 Vue 2 中，provide 和 inject 是一对用于父组件向子组件传递数据的选项。

在子组件中，通过 inject 属性可以接收父组件通过 provide 传递过来的数据，实现跨层级组件间的通信。

示例：

父组件中：

<template>
  <div>
    <ChildComponent></ChildComponent>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  provide() {
    return {
      name: 'John'
    };
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

子组件中：

<template>
  <div>
    <p>My name is {{ injectedName }}</p>
  </div>
</template>

<script>
export default {
  inject: ['name'],
  computed: {
    injectedName() {
      return this.name;
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

二、vue3中

在 Vue 3 中，provide 和 inject 的使用方法依旧相同，但是有一个重要的改变。在 Vue 3 中，使用 provide 和 inject 能够实现响应式传递数据。

示例：

<template>
  <div>
    <ChildComponent></ChildComponent>
  </div>
</template>

<script>
import { provide, ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  setup() {
    const name = ref('John');
    provide('name', name);
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

子组件中：

<template>
  <div>
    <p>My name is {{ injectedName }}</p>
    <button @click="changeName">Change Name</button>
  </div>
</template>

<script>
import { inject } from 'vue';

export default {
  setup() {
    const name = inject('name');
    
    const changeName = () => {
      name.value = 'Bob';
    };

    return {
      name,
      changeName
    };
  },
  computed: {
    injectedName() {
      return this.name;
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

在上述示例中，父组件通过 provide 传递了一个响应式的 name 数据给子组件。子组件通过 inject 接收到这个数据，并能够改变它。当子组件改变了 name 的值时，父组件的 name 值也会随之变化，即实现了响应式的数据传递。