Vue3通透教程跨级组件通讯—依赖注入

在Vue3中，跨级组件通信可以通过provide和inject来实现依赖注入。这里提供一个简单的例子来说明如何使用这两个API。

假设我们有一个父组件ParentComponent.vue和一个子组件ChildComponent.vue，我们想要父组件向子组件传递一个方法。

首先，在父组件中使用provide来定义要传递的属性和方法：

// ParentComponent.vue
<template>
  <ChildComponent />
</template>
 
<script>
import { provide } from 'vue';
import ChildComponent from './ChildComponent.vue';
 
export default {
  components: {
    ChildComponent
  },
  setup() {
    const sendMessage = (message) => {
      console.log(`Message from Parent: ${message}`);
    };
 
    provide('parentMessage', sendMessage);
  }
};
</script>

然后，在子组件中使用inject来接收父组件传递下来的方法，并在子组件模板中调用它：

// ChildComponent.vue
<template>
  <button @click="sendMessageToParent('Hello from Child')">
    Send Message to Parent
  </button>
</template>
 
<script>
import { inject } from 'vue';
 
export default {
  setup() {
    const sendMessageToParent = inject('parentMessage');
 
    return {
      sendMessageToParent
    };
  }
};
</script>

当你点击按钮时，父组件中的sendMessage函数会被调用，并且能够接收到从子组件传递的消息。这种方式可以有效地实现跨组件通信，特别是在有多层嵌套的组件结构中非常有用。