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>

    <!-- 给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>

<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>