子组件:
import {defineEmits} from "vue"
const childValue = '我是子组件的值'
const emit = defineEmits(['exportValue'])
const exportValue = () =>{
emit('exportValue',childValue)
}
只要一调用exportValue()方法,就可以将子组件的值传递出去,调用该方法可以通过点击事件或者生命周期函数onMounted实现
父组件:
<template>
<Child @exportValue="getChildValue" />
{{childValue}}
</template>
<script steup lang="ts">
import Child from "@/components/common/Child.vue"
const childValue = ref<string>()
const getChildValue = (val: string) => {
childValue.value = val
}
</script>
注意对参数的数据类型的限制