Vue 中用 provide/inject 实现祖先与后代组件方法传递的方法

在 Vue 开发中，组件间的通信是一项重要任务。当涉及到祖先组件向后代组件传递数据或方法时，provide 和 inject 是非常实用的工具。

provide 和 inject 是 Vue 提供的一对选项，用于实现跨级组件通信。与 props 和 $emit 不同，它们不需要在组件树中层层传递数据，大大简化了复杂组件结构下的通信流程。

在祖先组件中使用 provide 选项来暴露数据或方法。例如：

<template>
  <div>
    <child-component></child-component>
  </div>
</template>

<script>
import childComponent from './childComponent.vue';

export default {
  components: {
    childComponent
  },
  provide() {
    return {
      // 传递一个数据
      ancestorData: '这是来自祖先的数据',
      // 传递一个方法
      ancestorMethod: () => {
        console.log('这是祖先组件的方法');
      }
    };
  }
};
</script>

在上述代码中，provide 是一个函数，它返回一个对象，对象的属性就是要提供给后代组件的数据或方法。

接下来，在后代组件中使用 inject 选项来接收这些数据或方法。假设 childComponent.vue 是后代组件：

<template>
  <div>
    <button @click="callAncestorMethod">{{ancestorData}}</button>
  </div>
</template>

<script>
export default {
  inject: ['ancestorData', 'ancestorMethod'],
  methods: {
    callAncestorMethod() {
      this.ancestorMethod();
    }
  }
};
</script>

在这个例子中，inject 是一个数组，列出要接收的属性名。通过这种方式，后代组件就可以直接使用从祖先组件传递过来的数据和方法。

需要注意的是，provide 和 inject 主要用于传递一些不常变化的数据或方法。因为它们的响应式是有限的，如果传递的是一个对象，对对象内部属性的修改可能不会触发组件更新。如果需要传递响应式数据，可以通过传递一个返回响应式数据的函数来实现。

通过 provide 和 inject，Vue 开发者能够更加高效地实现祖先与后代组件之间的方法传递，提升开发效率，优化组件结构。这一特性在构建大型、复杂的 Vue 应用时，无疑是一项强大的工具。