前言：我引用了大佬的文章，但我实在找不到网址链接了，我记录在笔记上的。如果大佬看见了，麻烦给我说一下，我注明一下出处

>关于兄弟组件传参>：Vue3 兄弟传参-CSDN博客

建议先看son.vue 里面写了那四种方式

首先放一个我的demo //defineProps什么的父子传参api不用引入！直接用，内置API

father.vue

<template>
    <div class="box">
        <son-item @fua="fub" :numa="numb" ref="childRef"></son-item>
    </div>
</template>

<script setup>
import sonItem from '@/components/son.vue';
import { ref } from 'vue';
let numb = ref(0)
const childRef= ref()//注册响应数据！！！！！！！！！！！！！！！！
//一定要注意这句，要去注册ref，不然就不能解析出来了，这是个踩过的坑 
let fub = (e)=>{
    //第二种方法返回的结果：
    console.log('这是父组件被动接收的子组件的参数'+e);
    numb.value++
    //第三种方法返回的结果：
    console.log('这是父组件主动获取的子组件的参数:'+childRef.value.selfNum);//偷了懒，没有单独去写一个方法，反正也是父组件里面的方法，将就用一下
}
setTimeout(()=>{
    childRef.value.openSon(xxx)//父组件调用子组件方法 并传参xxx给子组件
},1000)
</script>

son.vue

<template>
    <div class="box">
        子组件接收的参数：{{ numa }}<br>
        子组件自定义的参数：{{ selfNum }}<br>
        //打印表里面有父组件主动获取子组件自定义的参数<br>
        <button @click="fuc">this is a magic button</button>
    </div>
</template>

<script setup>
import { ref } from "vue"

//1、子组件接收父组件的参数
defineProps({
    numa: {
        type: Number,
        default: NaN,
    }
})

//2、子组件传给父组件参数(子组件调用父组件的方法并传参进去)
const str = '这是子组件数据'
const emits = defineEmits(['fua'])//这里暴露父组件自定义的方法
const fuc = () => {
    emits('fua', str)
    selfNum.value+=2
}

//3、父组件（主动）获取子组件里面自定义的参数----defineExpose暴露
let selfNum = ref(0)//自定义一个变量并用上面方法改变其值
//4、父组件（主动）调用子组件内方法----defineExpose暴露(父传子)
const openSon = (res?: any) =>{
    console.log(res)//父组件传来的参数
}
defineExpose({
    selfNum,//暴露子组件值，让父组件随时可以抓取  当然！也可以暴露方法，让父组件调用
           //父组件调用的时候，直接用ref按照父组件里面的写法就行了
    openSon, //暴露子组件方法
})
</script>

注意：如果son需要father传来的值做一些操作的话；需要拿一个值来接收defineProps，例如：

const props = defineProps({
    numa: {
        type: Number,
        default: NaN,
    }
})
console.log(props.numa);

为了区分变量和函数所以用了xxa,xxb,xxc//变量用得不一样，这样更好区分对应的东西

其实我的demo已经讲得很清楚了，如果实在不懂也可以看下文//我也是小白，麻烦有不足请指出

---

下面是大佬的文章，但也做了一点小修改

（1）defineProps：子组件接收父组件中传来的props

父组件代码

<template>    
    <my-component @click="func" :numb="numb"></my-component>  
</template>  
<script lang="ts" setup>    
    import {ref} from 'vue';    
    import myComponent from '@/components/myComponent.vue';    
    const numb = ref(0);    
    let func = ()=>{numb.value++;}  
</script>

子组件代码

<template>    
    <div>{{numb}}</div>  
</template>  
<script lang="ts" setup>    
    defineProps({      
        numb:{        
            type:Number,        
            default:NaN      
        }    
    })  
</script>

（2）[1] defineEmits 代替emit，子组件向父组件传递数据（子组件向外暴露数据）

子组件代码

<template>  
    <div>子组件</div>  
    <button @click="toEmits">子组件向外暴露数据</button>
</template>
<script setup>
    import {ref} from 'vue'
    const name = ref('我是子组件')
    //1、暴露内部数据const  
    emits = defineEmits(['childFn']);
    const  toEmits = () => {  
    //2、触发父组件中暴露的childFn方法并携带数据  
        emits('childFn',name)
    }
</script>

父组件代码

<template>
    <div>父组件</div>
    <Child  @childFn='childFn' />
    <p>接收子组件传递的数据{{childData}} </p>
  </template>
  
  <script setup>
  import {ref} from 'vue'
  import Child from './child.vue'
  const childData = ref(null)    
  const childFn=(e)=>{
      consloe.log('子组件触发了父组件childFn，并传递了参数e')
      childData=e.value
  }    
  </script>

[2] defineEmits：子组件调用父组件中的方法

子组件代码

<template>
    <div>{{ numb }}</div>
    <button @click="onClickButton">数值加1</button>
      </template >
    <script lang="ts" setup>
      defineProps({
        numb:{
            type:Number,
            default:NaN
              }
          })
      const emit = defineEmits(['addNumb']);
          const onClickButton = ()=>{
        //emit(父组件中的自定义方法,参数一,参数二,...)
        emit("addNumb");
          }
  </script>

父组件代码

<template>
    <my-component @addNumb="func" :numb="numb"></my-component>
  </template>
  <script lang="ts" setup>
    import {ref} from 'vue'; 
    const numb = ref(0);
    let func = ()=>{
      numb.value++;
    }
  </script>

（3）defineExpose：子组件暴露属性，可以在父组件中拿到

使用<script setup> 的组件，父组件是无法通过ref 或者 $parent 获取到子组件的ref等响应数据，需要通过defineExpose 主动暴露

子组件代码

<script setup>
import { ref } from 'vue'
const a = 1
const b = ref(2)
//主动暴露组件属性
defineExpose({
  a,
  b
})
</script>

父组件代码

<template>
    <div>父组件</div>
    <Child  ref='childRef' />
    <button @click='getChildData'>通过ref获取子组件的属性 </button>
  </template>
  <script setup>
  import {ref} from 'vue'
  import Child from './child.vue'
  const childRef= ref()  //注册响应数据  
  const getChildData =()=>{
    //子组件接收暴露出来得值
    console.log(childRef.value.a) //1
    console.log(childRef.value.b) //2  响应式数据
  }    
  </script>

以上就是全部内容，我也只是一个小白，才学一天做个总结而已