背景：随着vue的使用范围越来越广，使用人数越来越多，其的发展更新速度也是再上一个台阶，vue2故好，但组件化过程中的某些组件化操作稍微有一些弊端，从而vue3随之诞生，vue3兼容typescript的开发，但是不向下兼容vue2。与vue2一起兼容使用的element ui也由于语言兼容性问题不再兼容vue3，想要继续使用饿了么组件的小伙伴可以转移到vue3+element plus组合进行开发。
好啦，不说废话啦，言归正传，我们一起来学习或者温习一下vue3中的组件传值吧。

一、父组件给子组件传值

父组件 father.vue：

<div class="father">
    <children :carr="arr" />
</div> 
  
<script setup>
import children from './children.vue'
import { reactive} from 'vue'
const arr = reactive([1, 3, 5])

子组件 children.vue：

 <div class="children">
    <div>carr:{{ carr }}</div>
  </div>

<script setup>
import { defineProps } from 'vue'
const props = defineProps({
  carr: {
    type: Array,
    required: true
  }
})

二、子组件给父组件传值–函数方式

父组件 father.vue：

<div class="father">
    <children :carr="fatherFun" />
 </div> 

<script setup> 
import children from './children.vue'

// 通过函数的方式接收值
const fatherFun = (n: number) => {
  console.log('父组件函数,接收到子组件的值为：', n)
}

子组件 children.vue：

 <div class="children">
    <div @click="onUp(3)">使用函数carr进行传值</div>
  </div>

<script setup> 
import { defineProps } from 'vue'
const props = defineProps({
  carr: {
    type: Function,
    required: true
  } // 子组件传值的类型
})

function onUp(n: number) {
  console.log('子组件函数')
  props.carr(n) // 传输子组件的值给父组件
}
/*
结果为：
子组件函数
父组件函数,接收到子组件的值为： 3
*/

二、子组件给父组件传值–emit方式

父组件 father.vue：

<div class="father">
    <children @getChildren="oncFun" />
</div>

<script setup>
import children from './children.vue'

function oncFun(x: number) {
  console.log('父组件函数,接收到子组件的值为:', x)
}

子组件 children.vue：

<div class="children">
    <div @click="onUp(3)">carr</div>
</div>

<script setup>
import { defineEmits } from 'vue'

//setup中使用emits,需要先声明，定义属性数量
const emits = defineEmits(['getChildren'])
function onUp(n: number) {
  console.log('子组件函数')
  emits('getChildren', n)
}

三、兄弟组件传值（ 借助mitt ）–全局引入

1. 下载mitt

npm install mitt
或者
cnpm install mitt

2. 在main.js中注册“挂载”到全局

import { createApp } from 'vue'
import App from './App.vue'
import mitt from 'mitt' // 导入mitt

const app = createApp(App)
app.config.globalProperties.$mitt = new mitt() // mitt在vue3中挂载到全局
app.mount('#app')

3. 在组件中使用
   子组件1： 发送数据

<template>
    <h2>子组件1: {{money}}</h2>
    <button @click="sendMittData">通过$mitt发送数据</button>
</template>
<script setup>
	import { ref, getCurrentInstance } from 'vue'
	
	let { proxy } = getCurrentInstance()
	let money = ref(100) // 存储用于发送的数据，money在template中使用时候直接使用，在语法糖中使用时候要用money.value获取其中的数据
	function sendMittData() {
		proxy.$mitt.emit('mittFn', money.value)
	}
</script>

子组件2：接收数据

<template>
    <h2>组件2接收mitt发送的数据: {{money}}</h2>
</template>
<script>
	import { ref, getCurrentInstance } from 'vue'
	
	let { proxy } = getCurrentInstance()
	let money = ref('') // 存储接收到的数据
	proxy.$mitt.on('mittFn', (res) => {
		money.value = res
	})
</script>

三、兄弟组件传值（ 借助mitt ）–局部引入

1. 下载mitt

npm install mitt
或者
cnpm install mitt

2. 在mitt.js文件

import mitt from 'mitt' // 导入mitt

export default new mitt()

3. 在组件中使用
   子组件1： 发送数据

<template>
    <h2>子组件1: {{money}}</h2>
    <button @click="sendMittData">通过$mitt发送数据</button>
</template>
<script setup>
	import { ref } from 'vue'
	import mitt from '../mitt/index.js'
	
	let money = ref(100) // 存储用于发送的数据，money在template中使用时候直接使用，在语法糖中使用时候要用money.value获取其中的数据
	function sendMittData() {
		mitt.emit('mittFn', money.value)
	}
</script>

子组件2：接收数据

<template>
    <h2>组件2接收mitt发送的数据: {{money}}</h2>
</template>
<script>
	import { ref } from 'vue'
	import mitt from '../mitt/index.js'
	
	let money = ref('') // 存储接收到的数据
	mitt.on('mittFn', (res) => {
		money.value = res
	})
</script>