vue3 子组件向父组件传递数据,函数
父组件向子组件传递参数请看:父组件vue3 setup 父组件向子组件传递参数子组件 defineExpose()暴露uid,name参数和sonToFather的方发<script lang="ts" setup>import { ref,reactive} from 'vue'const sonToFather = (yourParam:string)=>{console.l
·
父组件向子组件传递参数请看:父组件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>
更多推荐
已为社区贡献1条内容
所有评论(0)