组件通信

Vue 3 中组件之间的通信方式有很多种，下面我将列举一些常用的通信方式，包括父传子、子传父、父直接获取子以及使用 pinia 进行状态管理。

1. 父传子（Props）
   父组件通过 props 将数据传递给子组件。

父组件：

vue

<template>  
  <ChildComponent :message="parentMessage" />  
</template>  

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

export default {  
  components: {  
    ChildComponent  
  },  
  data() {  
    return {  
      parentMessage: 'Hello from Parent'  
    };  
  }  
};  
</script>

子组件：

vue

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

<script>  
export default {  
  props: ['message']  
};  
</script>

2. 子传父（Events）
   子组件通过触发自定义事件将数据传递给父组件。

子组件：

vue

<template>  
  <button @click="notifyParent">Notify Parent</button>  
</template>  

<script>  
export default {  
  methods: {  
    notifyParent() {  
      const childMessage = 'Hello from Child';  
      this.$emit('child-event', childMessage);  
    }  
  }  
};  
</script>

父组件：

vue

<template>  
  <ChildComponent @child-event="handleChildEvent" />  
</template>  

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

export default {  
  components: {  
    ChildComponent  
  },  
  methods: {  
    handleChildEvent(childMessage) {  
      console.log(childMessage);  
    }  
  }  
};  
</script>

3. 父直接获取子（Refs）
   父组件可以使用 ref 直接访问子组件的实例或 DOM 元素。

父组件：

vue

<template>  
  <ChildComponent ref="childRef" />  
</template>  

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

export default {  
  components: {  
    ChildComponent  
  },  
  mounted() {  
    console.log(this.$refs.childRef); // 访问子组件实例  
  }  
};  
</script>

4. Pinia
   Pinia 是一个专为 Vue 3 设计的状态管理库，用于跨组件共享状态。

安装 Pinia：

bash
npm install pinia
使用 Pinia：

首先，在应用的入口文件（如 main.js 或 main.ts）中安装 Pinia 插件：

javascript

import { createApp } from 'vue';  
import { createPinia } from 'pinia';  
import App from './App.vue';  

const app = createApp(App);  
app.use(createPinia());  
app.mount('#app');
然后，在组件中使用 Pinia：

Store：

javascript
// store.js

import { defineStore } from 'pinia';  

export const useStore = defineStore('main', {  
  state: () => ({  
    count: 0  
  }),  
  actions: {  
    increment() {  
      this.count++;  
    }  
  }  
});

组件：

vue

<template>  
  <div>  
    <p>{{ count }}</p>  
    <button @click="increment">Increment</button>  
  </div>  
</template>  

<script>  
import { useStore } from './store';  

export default {  
  setup() {  
    const store = useStore();  

    return {  
      count: store.count,  
      increment: store.increment  
    };  
  }  
};  
</script>

这些是在 Vue 3 中常用的组件通信方式。根据具体的应用场景和需求，你可以选择适合的方式来实现组件间的通信。