vue3 子组件向父组件传递数据,函数

父组件向子组件传递参数请看：父组件vue3 setup 父组件向子组件传递参数

子组件 defineExpose（）暴露uid,name参数和sonToFather的方发，在setup语法糖里面defineExpose不用import引入直接可使用

<script lang="ts" setup>
import { ref,reactive} from 'vue'

const sonToFather = (yourParam:string)=>{
    console.log(yourParam+"子组件自定义的sonToFather()方发被执行了")
    return reactive({f:"篮球",g:"国足"})
}
//暴露参数出去,其他地方用onMounted接收
defineExpose({
    uid:"我是son.vue的defineExpose暴露的参数",
    name:"defineExpose 向父组件传递的参数",
    sonToFather//子组件暴露出去的方法
})

</script>

父组件在引入子组件的时候加上ref="xxxxx"，

然后const xxxxx = ref()，

再在onMounted((){

        console.log(xxxxx.value)//打印子组件的值

        console.log(xxxxx.value.oooo())//调用子组件的oooo方发

})

<template>
<!--传递父组件的fatherTitle参数到子组件,getFromMySons接收子组件的参数和方发-->
<Son :fatherTitle="xxxxx"  ref="getFromMySons"></Son>
</template>

<script lang="ts" setup>
import { ref,reactive,onMounted } from 'vue'
import Son from "./son.vue"//引入子组件


//接收子组件传递过来的参数和方发
const getFromMySons = ref()//这个名字要跟上面子组件的ref="getFromMySons"名字一样
onMounted(()=>{//用onMounted接收子组件暴露的参数和方发
	console.log("onMounted接收子组件传递过来的参数")
	console.log(getFromMySons.value)
	console.log(getFromMySons.value.name,getFromMySons.value.uid)
	
    //执行子组件的方发
	console.log(getFromMySons.value.sonToFather("爸爸执行子组件的sonToFather方发->"))
})
</script>