前军教程网

emit就是事件Event。

这一节没废话，直接上代码，父组件：

<template>
    <div class="father">
        <h1>父组件</h1>
        装货地：北京，卸货地：海口，发车时间：{{ departTime }}
        <!-监听子组件的事件，并设置回调函数->
        <Son @set-depart-time="setDepartTime"/>
    </div>
</template>
<script lang='ts' setup name='Father'>
import { ref } from 'vue';
import Son from './Son.vue';

const departTime = ref('待定')

function setDepartTime(val: string) {
    departTime.value = val
}
</script>
<style scoped>
.father {
    background-color: darkseagreen;
    box-shadow: 0 0 10px black;
    border-radius: 10px;
    height: 100%;
}
</style>

子组件：

<template>
    <div class="son">
        <h1>子组件</h1>
        发车时间：{{ departTime }} <br>
        <button @click="letsGo">发车上报</button>
    </div>
</template>
<script lang='ts' setup name='Son'>
import { ref } from 'vue';
const departTime = ref('待定')

function letsGo() {
    departTime.value = "2024-01-01 11:11:11." + Math.random()
    // 触发事件&传参
    emit('set-depart-time', departTime.value)
}

//声明事件，并返回emit以便进行相关操作
const emit = defineEmits(['set-depart-time'])
</script>
<style scoped>
.son {
    background-color: silver;
    padding: 10px;
    margin-top: 10px;
    box-shadow: 0 0 10px black;
    border-radius: 10px;
    width: 90%;
    margin: auto;
}
</style>

说明：

• 父组件监听了子组件名为：set-depart-time的事件，其对应的回调函数是setDepartTime。
• 子组件通过const emit = defineEmits(['事件名A','事件名B'])声明了要触发的事件，并返回一个方法（emit）供我们使用。
• 子组件通过emit('事件名', 参数...)触发事件。从而达到子传父的目的。