一、 父组件向子组件传值
1. 使用props向子组件传递数据
//父组件：
<son class="son" :itemData="123" />//通过v-bind绑定数据，向子组件传递数据
//子组件
<template>
<div>
<h2>son组件</h2>
<h2>{{ itemData }}</h2>//在这里直接使用
</div>
</template>
<script>
export default {
props: ['itemData'],//在这里接受父组件传递的参数
setup() {
return {}
}
}
</script>
2.通过ref获取子组件，然后调用子组件中的函数
//父组件
const sonRef = ref()//获取子组件实例
const sonClick = () => {
console.log(sonRef.value);
sonRef.value.add()//调用子组件中的函数
}
//子组件
const nums = ref(10)
const add = ()=>{
nums.value++
}
3.通过provide和inject传递参数
说明：上面两种一般适用于层级不深的情况，如果层级过于深入，建议使用下面这几种
//祖先组件
const Appnums = ref(100)
provide('appnums', Appnums)
//子组件
const appnums = inject('appnums')//子组件获取祖先组件传递的值，并在子组件使用
4.通过vuex做到数据传递
详情请看这里（这里是一个链接，但是自己vuex的文章还没写，敷衍一下吧）
二、子组件给父组件传递数据
1.通过使用emits进行数据传递
//父组件
<son @click = 'additemData' />//父组件传递一个函数到子组件
//子组件
<script>
export default {
emits: ['click'],
setup(props, { emit }) {
const click = () => {
emit('click')//子组件调用父组件传递的函数，达到传输数据的效果
}
return {
click
}
}
}
</script>
