vue3组件常用的通信方式(父传子、子传父、父直接获取子、pinia)

1. Vue 3 父传子通信

   // ParentComponent.vue
   <template>
     <child-component :message="parentMessage" />
   </template>
   
   <script lang="ts">
   import { defineComponent, ref } from 'vue';
   import ChildComponent from './ChildComponent.vue';
   
   export default defineComponent({
     components: {
       ChildComponent,
     },
     setup() {
       const parentMessage = ref('Hello from parent');
   
       return {
         parentMessage,
       };
     },
   });
   </script>
   

2. Vue 3 子传父通信：

   // ChildComponent.vue
   <template>
     <button @click="sendToParent">Send Message to Parent</button>
   </template>
   
   <script lang="ts">
   import { defineComponent, ref } from 'vue';
   
   export default defineComponent({
     setup(props, { emit }) {
       const sendToParent = () => {
         emit('message-to-parent', 'Hello from child');
       };
   
       return {
         sendToParent,
       };
     },
   });
   </script>
   
   // ParentComponent.vue
   <template>
     <child-component @message-to-parent="handleMessageFromChild" />
     <div>{{ messageFromChild }}</div>
   </template>
   
   <script lang="ts" setup>
   import { ref } from 'vue';
   import ChildComponent from './ChildComponent.vue';
   
   const messageFromChild = ref('');
   
   const handleMessageFromChild = (message: string) => {
     messageFromChild.value = message;
   };
   
   </script>

3. Vue 3 父直接获取子通信：

   // ParentComponent.vue
   <template>
       <child-component ref="childRef" />
       <button @click="getParentMessageFromChild">Get Message from Child</button>
       <div>{{ parentMessageFromChild }}</div>
   </template>
   
   <script lang="ts" setup>
   import { ref } from 'vue';
   import ChildComponent from './ChildComponent.vue';
   
   const childRef = ref(null);
   const parentMessageFromChild = ref('');
   
   const getParentMessageFromChild = () => {
       if (childRef.value) {
           parentMessageFromChild.value = childRef.value.message;
       }
   };
   </script>
   

4. 使用 Pinia 进行组件间通信：

   // store.ts
   import { defineStore } from 'pinia';
   
   export const useStore = defineStore({
     id: 'app',
     state: () => ({
       message: 'Hello from Pinia store',
     }),
   });
   
   // Component.vue
   <template>
       <div>{{ $store.message }}</div>
       <button @click="updateMessage">Update Message</button>
   </template>
   
   <script lang="ts" setup>
   import { defineComponent } from 'vue';
   import { useStore } from '../stores/counter';
   
   
   const store = useStore();
   
   const updateMessage = () => {
       store.message = 'Updated message';
   };
   
   
   </script>