父组件向子组件传值

父子组件通信是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。

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