vue3.x的provide与inject详细解读

在 Vue 3.x 中，provide 和 inject 是一对用于实现依赖注入的 API。它们允许父组件向其所有子组件（无论嵌套多深）传递数据或方法，而不需要通过 props 逐层传递。这在开发复杂组件或高阶组件时非常有用。

1. provide 的基本用法

provide 用于在父组件中提供数据或方法，供其所有子组件使用。它通常在 setup 函数中使用。

import { provide, ref } from 'vue'; export default { setup() { const message = ref('Hello from parent'); // 提供数据 provide('message', message); return { message }; } };

在上面的例子中，父组件通过 provide 提供了一个名为 message 的响应式数据。

2. inject 的基本用法

inject 用于在子组件中注入父组件提供的数据或方法。它通常在 setup 函数中使用。

import { inject } from 'vue'; export default { setup() { // 注入数据 const message = inject('message'); return { message }; } };

在这个例子中，子组件通过 inject 注入了父组件提供的 message 数据，并可以在模板或逻辑中使用它。

3. 默认值

inject 可以接受一个默认值，当父组件没有提供对应的数据时，子组件会使用这个默认值。

const message = inject('message', 'Default message');

如果父组件没有提供 message，子组件将使用 'Default message' 作为默认值。

4. 提供和注入方法

除了数据，provide 和 inject 也可以用于传递方法。

// 父组件 import { provide } from 'vue'; export default { setup() { const showMessage = () => { alert('Message from parent'); }; provide('showMessage', showMessage); return {}; } }; // 子组件 import { inject } from 'vue'; export default { setup() { const showMessage = inject('showMessage'); return { showMessage }; } };

在子组件中，可以通过调用 showMessage 方法来触发父组件中的逻辑。

5. 响应式数据

provide 和 inject 可以结合 Vue 的响应式系统使用。如果提供的数据是响应式的（如 ref 或 reactive），那么子组件中注入的数据也会保持响应性。

// 父组件 import { provide, ref } from 'vue'; export default { setup() { const count = ref(0); provide('count', count); return { count }; } }; // 子组件 import { inject } from 'vue'; export default { setup() { const count = inject('count'); return { count }; } };

在子组件中，count 是响应式的，子组件可以修改它，并且父组件中的 count 也会同步更新。

6. 使用 Symbol 作为 key

为了避免命名冲突，可以使用 Symbol 作为 provide 和 inject 的 key。

// 父组件 import { provide, ref } from 'vue'; const messageKey = Symbol(); export default { setup() { const message = ref('Hello from parent'); provide(messageKey, message); return { message }; } }; // 子组件 import { inject } from 'vue'; const messageKey = Symbol(); export default { setup() { const message = inject(messageKey); return { message }; } }; 7. 注意事项

provide 和 inject 主要用于高阶组件或库的开发，普通应用开发中应优先使用 props 和 emit。

provide 和 inject 不是响应式的，除非你提供的是响应式对象（如 ref 或 reactive）。

inject 只能在 setup 函数或 functional 组件中使用。

8. 总结

provide 和 inject 是 Vue 3.x 中用于依赖注入的强大工具，特别适合在复杂组件树中传递数据或方法。通过它们，可以避免繁琐的 props 传递，使代码更加简洁和可维护。