props方式

1.父传子

父组件传递
<template><Child :car="car"/>
</template>
<script setup lang="ts">
import {ref} from 'vue'
import Child from './Child.vue'
let car = ref('宝马')
</script>子组件接收
<template><div class="child">{{ car }}</div>
</template>
<script setup lang="ts">
defineProps(['car'])
</script>

2.子传父

父组件传递
<template><Child :car="car" :sendValue="sendValue"/>
</template>
<script setup lang="ts">
import {ref} from 'vue'
import Child from './Child.vue'
let car = ref('宝马')
function sendValue(value) {car.value=value
}
</script>子组件接收
<template><div class="child">{{ car }}</div><div @click="sendValue('奔驰')">点击</div>
</template>
<script setup lang="ts">
let refValue = defineProps(['car','sendValue'])
console.log(refValue.car,refValue.sendValue)
</script>

3、自定义事件方式

父组件传递，一个自定义事件@sendValue="sendValue"
<template><Child :car="car" @send-value="sendValue"/>
</template>
<script setup lang="ts">
import {ref} from 'vue'
import Child from './Child.vue'
let car = ref('宝马')
function sendValue(value) {car.value=value
}
</script>子组件接收 defineEmits
让后触发sendValue自定义事件，第二个参数就是传递的值
<template><div class="child">{{ car }}</div><div @click="emit('send-value','奔驰')">点击</div>
</template>
<script setup lang="ts">
let refValue = defineProps(['car'])
let emit = defineEmits(['send-value'])
console.log(refValue.car)
</script>

4、mitt方式

实现任意通信
打包后包体积很小200byte

import mitt from 'mitt'
const emitter = mitt()绑定
emitter.on('test1',(v)=>{接收值})
emitter.on('test2',(v)=>{接收值})触发
emitter.emit('test1','值')
emitter.emit('test2','值')解绑
onUnMounted的时候去解绑
emitter.off('test1')
emitter.off('test2')

v-model

虽然实际开发部会自己用
当是组件库底层，在大量使用

<input type="text" :value="name" 
@input="name=$event.target.value"

参考连接，学了一半，没时间了
https://www.bilibili.com/video/BV1Za4y1r7KE?p=55&vd_source=705343a89f38d5c0d895383ccf38a5d6