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