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 传递，使代码更加简洁和可维护。