在 Vue3 中,provide 和 inject 是用于跨层级组件通信的方法。可以通过 provide 方法向下传递数据,然后通过 inject 方法在子组件中访问这些数据。
provide 方法接收一个参数,该参数是一个对象,其中包含需要共享的数据。在父组件中使用 provide 方法提供数据:
import { provide } from 'vue';
export default {
setup() {
const user = {
name: 'John',
age: 30
};
provide('user', user);
return {
// ...
};
}
};
在子组件中,可以使用 inject 方法来访问 provide 提供的数据。inject 方法接收一个参数,该参数是 provide 提供的键值。如果 provide 没有提供该键值,则 inject 方法会返回默认值。
import { inject } from 'vue';
export default {
setup() {
const user = inject('user', { name: '', age: 0 });
return {
user
};
}
};
在上面的示例中,我们使用 inject 方法从父组件中获取 user 数据,并在子组件中使用它。如果父组件没有提供 user 数据,则 inject 方法将返回默认值。
需要注意的是,在使用 provide 和 inject 方法时,建议使用字符串键值,以避免出现命名冲突。