在 Vue3 中,provideinject 是用于跨层级组件通信的方法。可以通过 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 方法将返回默认值。

需要注意的是,在使用 provideinject 方法时,建议使用字符串键值,以避免出现命名冲突。

Logo

前往低代码交流专区

更多推荐