面试题：Vue中Provide/Inject在插件开发里如何实现父子组件通信

Question

在一个简单的Vue插件开发场景中，假设存在一个父组件和多个子组件，需要通过Provide/Inject传递数据来实现子组件对父组件数据的访问。请描述实现步骤并给出关键代码示例。

Answer 1

1. 实现步骤：
   • 父组件中使用provide：在父组件中定义provide选项，将要传递的数据暴露出去。
   • 子组件中使用inject：在子组件中使用inject选项，接收父组件传递的数据。
2. 关键代码示例：
   • 父组件代码（假设为Parent.vue）：

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

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentData: '这是父组件的数据'
    };
  },
  provide() {
    return {
      sharedData: this.parentData
    };
  }
};
</script>

• 子组件代码（假设为ChildComponent.vue）：

<template>
  <div>
    <p>子组件获取到的数据: {{ sharedData }}</p>
  </div>
</template>

<script>
export default {
  inject: ['sharedData']
};
</script>