组件之间的通信（传值） vue3

父组件向子组件传值

父子组件通信是 Vue 中最基本的通信方式之一。在这种情况下，父组件通过v-bind绑定一个属性，然后将该属性传递给子组件。子组件通过props属性接收父组件传递的值。

父组件

这两个 temp 就是要传的值，如果要传递一个变量记得使用v-bind进行绑定

然后在子组件中使用 defineprops 接收传过来的值并使用插值表达式在页面上显示

子组件向父组件传值

子父组件通信是通过让父组件订阅一个事件，子组件通过$emit发布该事件来实现的，和父子组件通信有点类似。

父组件订阅一个叫handleChildMessage的事件。

子组件通过emits来进行发布该事件。

兄弟组件通信

vuex

使用 vuex 来进行兄弟组件之间传值其实并不像是传值，更像是一个公共的值，两边都能对其进行修改和访问。
vuex 的使用首先检查有没有安装 vuex。安装完成后在 src 目录下的 store 文件夹内的 index.js 完成如下配置。

state就是一个公共仓库，有点类似于选项式 api 里面的data，mutation中存放的是来修改state内的值的方法。

这是一号子组件，要访问 state 内的值，首先使用import { useStore } from 'vuex';引入 useStore，接着使用一个实例承接 useStore 的返回值，这个返回值就是整个 store 对象。要访问 state 内的值就直接 store.state.key 就行了。在 mutations 中的方法需要通过 commit 来使用。

<template>
    <div>
      <p>接收的值: {{ store.state.sharedValue }}</p>
      <button @click="updateValue">Update Value in Sibling B</button>
    </div>
  </template>
  
  <script setup>
   import { ref } from 'vue';
  import { useStore } from 'vuex';
  
  const store = useStore();
  const updateValue = ()=>{
    store.commit("setSharedValue",'B')
  }
  </script>
  

这个是二号子组件，和一号唯一的区别在于点击按钮后会将，state 内的 sharedValue 修改为 B。

最后整个页面就是这个效果。两个兄弟组件都能访问到同一个值并且能对其进行修改。