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