Vue3 中 provide 与 inject 的使用方法

在 Vue3 的开发中，provide 与 inject 是一对非常实用的 API，它们为组件之间的跨级通信提供了便利。

我们来了解一下 provide。provide 是在父组件中使用的函数，用于向下传递数据。其语法很简单，在 setup 函数中调用 provide 并传入两个参数：第一个参数是要传递的数据的 key，第二个参数则是具体要传递的数据。例如：

import { provide } from 'vue';

export default {
  setup() {
    const message = '这是来自父组件的数据';
    provide('sharedMessage', message);
  }
};

这样，就将 message 数据以 sharedMessage 为 key 提供给了所有后代组件。

接下来看看 inject。inject 是在子组件或更深层次的后代组件中使用的函数，用于接收父组件通过 provide 传递下来的数据。同样在 setup 函数中使用，传入一个参数，即父组件中 provide 的 key。例如：

import { inject } from 'vue';

export default {
  setup() {
    const receivedMessage = inject('sharedMessage');
    return {
      receivedMessage
    };
  }
};

在模板中，就可以直接使用 receivedMessage 来显示接收到的数据。

需要注意的是，provide 和 inject 主要用于跨级传递数据，而不是替代 props 和 $emit 用于父子组件之间的常规通信。并且，通过 provide 传递的数据是响应式的，只要原始数据发生变化，所有依赖它的后代组件都会自动更新。

provide 和 inject 还支持传递方法。比如在父组件中提供一个方法：

import { provide } from 'vue';

export default {
  setup() {
    const handleClick = () => {
      console.log('按钮被点击了');
    };
    provide('clickHandler', handleClick);
  }
};

在子组件中通过 inject 接收并调用：

import { inject } from 'vue';

export default {
  setup() {
    const clickHandler = inject('clickHandler');
    return {
      clickHandler
    };
  }
};

在模板中添加按钮并绑定点击事件：

<button @click="clickHandler">点击我</button>

掌握 Vue3 中 provide 与 inject 的使用方法，能让我们在处理组件间复杂的跨级通信时更加得心应手，提高开发效率。