vue3 事件 emit 使用

最新推荐文章于 2025-09-18 19:08:06 发布

原创最新推荐文章于 2025-09-18 19:08:06 发布 · 4.3k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

vue 同时被 3 个专栏收录

105 篇文章

订阅专栏

es6

78 篇文章

订阅专栏

JavaScript

52 篇文章

订阅专栏

本文探讨了在Vue应用中，如何使用`@SynchroData`和`@SynchroEvent`实现父组件与子组件之间的数据同步，并展示了如何在子组件中进行事件传递的校验。通过实例代码，读者将理解Vue组件间的交互及其事件处理机制。

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>