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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

child.vue

<template>
    <a-input v-model:value="inputValue">a-input>
    <br> <br>
    
    <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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38