VUE框架Vue3使用自定义事件的方式传递数据------VUE框架

<template>
    <!-- 给User绑定事件 -->
    <!-- 带参数的方法不要有括号,否则识别不到,我不懂原理... -->
    <User @event1="showInfo"></User>
</template>
 
<script>
import User from "./components/User.vue"
export default {
    name : "App",
    components : {User},
    setup(){
        function showInfo(name,age){
            console.log(name);
            console.log(age);
            alert(`姓名${name}年龄${age}`);
        }
        return {showInfo};
    }
}
</script>

<template>
    <button @click="triEvent1()">触发事件</button>
</template>
 
<script>
export default {
    name : "User",
    // 这里的context代表组件上下文对象
    // context是setup的第二个参数
    setup(props,context){
        function triEvent1(){
            // 触发这个事件
            context.emit('event1',"Jack",20);
        }
        return {triEvent1};
    }
}
</script>