child.vue
<template>
<div class="child">
<span>{
{title}}</span>
<button @click="onClick">跳转</button>
</div>
</template>
<script lang="ts" setup>
import { withDefaults, defineProps, defineEmits } from 'vue'
interface Props{
title?:string
}
const props = withDefaults(defineProps<Props>(), {
title: '标题'//默认值
})
interface Emits{
(e:'link', data: object): void
}
const emits = defineEmits<Emits>()
const onClick = ():void => {
emits('link', { text: props.title })
}
</script>
parent.vue
<template>
<div>
<child title="测试" @link="handleLink"></child>
</div>
</template>
<script lang="ts" setup>
import child from '@/components/child.vue'
const handleLink = (e:object):void => {
console.log(e.text)//测试
}
</script>