provide 和 inject的使用方式

在 Vue.js 中，provide 和 inject 是一种依赖注入的方式，允许祖先组件向下传递数据，而不必通过每个组件一层层地传递。这在处理深层嵌套的组件时特别有用。以下是 provide 和 inject 的基本使用方式：

Vue 2.x 中的使用方式

在 Vue 2 中，provide 和 inject 选项需要在组件对象中使用。

祖先组件提供数据：

// 祖先组件
export default {
  provide() {
    return {
      message: 'Hello from ancestor component'
    };
  }
  // ... 其他选项
};

后代组件注入数据：

// 后代组件
export default {
  inject: ['message'],
  mounted() {
    console.log(this.message); // 输出: Hello from ancestor component
  }
  // ... 其他选项
};

Vue 3.x 中的使用方式

在 Vue 3 中，provide 和 inject 可以在 setup 函数中使用，也可以通过 provide 和 inject API 使用。

祖先组件提供数据：

// 祖先组件
import { provide } from 'vue';

export default {
  setup() {
    provide('message', 'Hello from ancestor component');
  }
  // ... 其他选项
};

或者使用 provide 函数：

import { provide } from 'vue';

export default {
  setup() {
    provide('message', ref('Hello from ancestor component'));
  }
  // ... 其他选项
};

后代组件注入数据：

// 后代组件
import { inject } from 'vue';

export default {
  setup() {
    const message = inject('message');
    // 使用 message
    return { message };
  }
  // ... 其他选项
};

默认值和类型注解

在 Vue 3 中，你可以为 inject 提供默认值，以及使用 TypeScript 进行类型注解：

import { inject } from 'vue';

export default {
  setup() {
    const message = inject<string>('message', 'Default message');
    // 使用 message
    return { message };
  }
  // ... 其他选项
};

响应性

如果你想要 provide 的值是响应式的，你应该使用 Vue 的响应式引用，例如 ref 或 reactive：

import { provide, ref } from 'vue';

export default {
  setup() {
    const message = ref('Hello from ancestor component');
    provide('message', message);
  }
  // ... 其他选项
};

然后，在后代组件中注入时，你将获得一个响应式的引用：

import { inject } from 'vue';

export default {
  setup() {
    const message = inject('message');
    // message 是响应式的
    return { message };
  }
  // ... 其他选项
};

通过这种方式，provide 和 inject 提供了一种跨组件传递数据的方法，而不必关心组件之间的嵌套层级。