VUE-Framework Vue3 verwendet benutzerdefinierte Ereignisse, um Daten zu übergeben ------VUE-Framework

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

<Vorlage>

    <!-- Ereignisse an Benutzer binden -->

    <!-- Methoden mit Parametern sollten keine Klammern haben, sonst werden sie nicht erkannt. Ich verstehe das Prinzip nicht... -->

    <Benutzer @event1="showInfo"></Benutzer>

</template>

<Skript>

Benutzer importieren aus „./components/User.vue“

Standard exportieren {

    Name: „App“,

    Komponenten: {Benutzer},

    aufstellen(){

        Funktion showInfo(name,age){

            console.log(name);

            console.log(age);

            alarm(`Name${name}Alter${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>

<Vorlage>

    <button @click="triEvent1()">Trigger-Ereignis</button>

</template>

<Skript>

Standard exportieren {

    Name: „Benutzer“,

    // Der Kontext repräsentiert hier das Komponentenkontextobjekt

    // context ist der zweite Parameter von setup

    setup(props,context){

        Funktion triEvent1(){

            // Dieses Ereignis auslösen

            context.emit('event1',"Jack",20);

        }

        return {triEvent1};

    }

}

</script>