子组件
<template>
<p>{{ props.msg }}</p>
<button @click="handleClick">点击我调用父组件</button>
</template>
<script setup lang="ts">
const props = defineProps({
msg: {type: String, dafult:()=>"默认值"}
})
const emit = defineEmits(['on-change']);
const handleClick=()=>{
emit('on-change', {type:'1',Number: 1});
}
function childFun(params:string){
console.log(params, '子组件函数被调用');
}
defineExpose({
child: '我是暴露子组件参数',
childFun
})
</script>
父组件
<script setup lang="ts">
import TheWelcome from '../components/child.vue'
import { ref, onMounted } from 'vue'
const msg = ref('欢迎!')
const handleClick=(params:string)=>{
console.log(params)
}
const prosEmitRef = ref()
onMounted(()=> {
console.log(prosEmitRef.value.child)
prosEmitRef.value.childFun('父组件调用');
})
</script>
<template>
<main>
<!--
:msg="msg" 传给子组件的参数
@on-change="handleClick"子组件调用用父组件的函数 handleClick
-->
<TheWelcome ref="prosEmitRef" :msg="msg" @on-change="handleClick" />
</main>
</template>