vue3中非父子组件、非祖先-后代组件之间传递方法

在 Vue 3 中，当需要在非父子组件或非祖先-后代组件之间传递方法，并且要求一个组件发出消息后另一个组件能够实时接收时，可以使用 Pinia 状态管理器来实现。Pinia 是 Vue 3 的官方状态管理库，它允许你在不同的组件间共享状态，并且可以实时响应状态的变化。

以下是使用 Pinia 来实现组件间通信的基本步骤：

1、创建 Pinia Store

首先，你需要创建一个 Pinia store 来存储状态和定义修改状态的方法。在 `store` 目录下创建一个新的文件，例如 `useMessageStore.js`，并定义你的 store。

// useMessageStore.js
  import { defineStore } from 'pinia';

  export const useMessageStore = defineStore('message', {
    state: () => ({
      message: ''
    }),
    actions: {
      setMessage(msg) {
        this.message = msg;
      }
    }
  });

2、在组件中使用 Store

然后，在需要发送和接收消息的组件中使用这个 store。你可以使用 `useStore` 函数来获取 store 的实例，并访问其状态和方法。

发送消息的 .vue 组件

  <template>
    <button @click="sendMessage">发送消息</button>
  </template>

  <script setup>
  import { useMessageStore } from '@/stores/useMessageStore';

  const messageStore = useMessageStore();

  function sendMessage() {
    messageStore.setMessage('Hello from Component A');
  }
  </script>

接收消息的 .vue 组件

  <template>
    <div>{{ message }}</div>
  </template>

  <script setup>
  import { useMessageStore } from '@/stores/useMessageStore';
  import { watch } from 'vue';

  const messageStore = useMessageStore();

  // 使用 watch 监听 message 的变化
  watch(() => messageStore.message, (newMessage) => {
    console.log('Received message:', newMessage);
  });
  </script>

3、实时响应状态变化

在上面的接收消息组件中，我们使用了 Vue 3 的 `watch` 函数来监听 `message` 状态的变化。当 `message` 状态被更新时，`watch` 函数会自动执行，从而实现实时接收消息的效果。

通过这种方式，你可以在 Vue 3 中实现非父子组件或非祖先-后代组件之间的通信，并且能够实时响应状态的变化。Pinia 提供了一种集中式的状态管理方式，使得组件间的通信变得更加简单和高效。