VUE框架Vue3使用自定义事件的方式传递数据------VUE框架
原创
©著作权归作者所有：来自51CTO博客作者旧约Alatus的原创作品，请联系作者获取转载授权，否则将追究法律责任
<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>
