vue3 事件 emit 使用

parent.vue

<template>

    <childVue @SynchroData="SynchroData" @SynchroEvent="SynchroEvent" />
    <br>
    <span>{{value}}</span>

</template>
<script setup>
import { ref } from 'vue';
import childVue from './child.vue';


const value = ref();
const SynchroData = (val) => {

    value.value = val

}
const SynchroEvent = (val) => {
    value.value = val
}

</script>
<style lang="less" scoped>
</style>

child.vue

<template>
    <a-input v-model:value="inputValue"></a-input>
    <br> <br>
    <!-- 事件传递直接简写  $emit -->
    <a-button type="primary" @click="$emit('SynchroData', inputValue)">$emit 简写</a-button>

    <br> <br>
    <!-- 事件传递校验 -->
    <a-button type="primary" @click="doEvent">在 setup 中调用</a-button>
    <br> <br>
</template>
<script setup>
import { ref } from 'vue';
const inputValue = ref();

// emit 传值校验
const emit = defineEmits({
    // 在这里需要声明一下事件名称，否则会报警告
    SynchroData: {},
    SynchroEvent: (value) => {
        // 这里的校验只会弹出一个警告，并不会阻止事件传递😓
        // 但是可以在这里加一层事件过程处理
        return ['success', 'warning', 'danger'].includes(value)
    }
})

// 在 setup 中进行 emit 事件传递
const doEvent = () => {
    emit('SynchroEvent', inputValue.value)
}

// emit 简写
// 正常不会对事件进行处理
// const emit = defineEmits(['SynchroData' , 'SynchroEvent'])

</script>
<style lang="less" scoped>
</style>