[{"data":1,"prerenderedAt":191},["ShallowReactive",2],{"content:\u002F2023\u002Fvue\u002Fvue3-event":3,"surround:\u002F2023\u002Fvue\u002Fvue3-event":181},{"id":4,"title":5,"body":6,"categories":152,"date":155,"description":156,"draft":157,"extension":158,"image":159,"meta":160,"navigation":162,"path":163,"permalink":159,"published":159,"readingTime":164,"recommend":159,"references":169,"seo":175,"sitemap":176,"stem":177,"tags":178,"type":179,"updated":159,"__hash__":180},"content\u002Fposts\u002F2023\u002Fvue\u002Fvue3-event.md","Vue 中的特殊变量 $event",{"type":7,"value":8,"toc":147},"minimark",[9,21,41,51,63,69,75,89,95,102,113,119,122,128,141],[10,11,12,13,20],"p",{},"根据 ",[14,15,19],"a",{"href":16,"rel":17},"https:\u002F\u002Fcn.vuejs.org\u002Fguide\u002Fessentials\u002Fevent-handling.html",[18],"nofollow","Vue 文档","，在 Vue 中进行事件监听时，事件的回调函数有两种写法：",[22,23,24],"ol",{},[25,26,27,31,32,36,37,40],"li",{},[28,29,30],"strong",{},"接受方法名","：不带圆括号的形式不需要传参，",[33,34,35],"code",{"code":35},"event"," 对象将被",[28,38,39],{},"自动","当做实参传入。",[42,43,49],"pre",{"className":44,"code":46,"language":47,"meta":48},[45],"language-html","\u003Ctemplate>\n  \u003Cbutton @click=\"greet\">Greet\u003C\u002Fbutton>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup>\nconst greet = (event) => {\n  console.log(event) \u002F\u002F event 对象\n}\n\u003C\u002Fscript>\n","html","",[33,50,46],{"__ignoreMap":48},[22,52,54],{"start":53},2,[25,55,56,59,60,62],{},[28,57,58],{},"接受对某个方法的调用","：带圆括号的形式可以传参，打印出来的 ",[33,61,35],{"code":35}," 将会变成我们手动传递的那个参数。",[42,64,67],{"className":65,"code":66,"language":47,"meta":48},[45],"\u003Ctemplate>\n  \u003Cbutton @click=\"greet(233)\">Greet\u003C\u002Fbutton>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup>\nconst greet = (event) => {\n  console.log(event) \u002F\u002F 233\n}\n\u003C\u002Fscript>\n",[33,68,66],{"__ignoreMap":48},[10,70,71,72,74],{},"如果现在既需要传递参数，又需要用到 ",[33,73,35],{"code":35}," 对象，该如何做呢？",[10,76,77,78,81,82,84,85,88],{},"这时候就需要用到 ",[33,79,80],{"code":80},"$event"," 这个特殊的变量啦，在内联声明的写法中，我们需要把 ",[33,83,80],{"code":80}," 变量作为参数，",[28,86,87],{},"显式","地传入方法中。",[42,90,93],{"className":91,"code":92,"language":47,"meta":48},[45],"\u003Ctemplate>\n  \u003Cbutton @click=\"greet($event, 233)\">Greet\u003C\u002Fbutton>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup>\nconst greet = (event, x) => {\n  console.log(event) \u002F\u002F event 对象\n  console.log(x) \u002F\u002F 233\n}\n\u003C\u002Fscript>\n",[33,94,92],{"__ignoreMap":48},[96,97,99,100],"h2",{"id":98},"自定义事件中的-event","自定义事件中的 ",[33,101,80],{"code":80},[10,103,104,105,108,109,112],{},"定义了一个子组件 ",[33,106,107],{"code":107},"MyButton","，并给 ",[33,110,111],{"code":111},"$emit"," 提供一个额外的参数。",[42,114,117],{"className":115,"code":116,"language":47,"meta":48},[45],"\u003Cbutton @click=\"$emit('increaseBy', 1)\">\n  Increase by 1\n\u003C\u002Fbutton>\n",[33,118,116],{"__ignoreMap":48},[10,120,121],{},"通常用一个组件方法来作为事件处理函数，该方法会接收到事件所传递的参数。",[42,123,126],{"className":124,"code":125,"language":47,"meta":48},[45],"\u003Ctemplate>\n  \u003CMyButton @increase-by=\"increaseCount\" \u002F>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup>\nconst count = ref(0)\nfunction increaseCount(n) {\n  count.value += n\n}\n\u003C\u002Fscript>\n",[33,127,125],{"__ignoreMap":48},[10,129,130,131,134,135,137,138,140],{},"当需要给 ",[33,132,133],{"code":133},"increaseCount"," 函数额外传递参数时，也可以使用 ",[33,136,80],{"code":80},"，此时的 ",[33,139,80],{"code":80}," 就是事件附带的参数。",[42,142,145],{"className":143,"code":144,"language":47,"meta":48},[45],"\u003Ctemplate>\n  \u003CMyButton @increase-by=\"increaseCount($event, 233)\" \u002F>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup>\nconst count = ref(0)\nfunction increaseCount(n, x) {\n  count.value += n\n  console.log(x) \u002F\u002F 233\n}\n\u003C\u002Fscript>\n",[33,146,144],{"__ignoreMap":48},{"title":48,"searchDepth":148,"depth":148,"links":149},4,[150],{"id":98,"depth":53,"text":151},"自定义事件中的 $event",[153,154],"学习笔记","Vue","2023-06-16","根据 Vue 文档，在 Vue 中进行事件监听时，事件的回调函数有两种写法：",false,"md",null,{"comments":157,"slots":161},{},true,"\u002F2023\u002Fvue\u002Fvue3-event",{"text":165,"minutes":166,"time":167,"words":168},"2 min read",1.815,108900,363,[170,172],{"title":171,"link":16},"Vue 文档：事件处理",{"title":173,"link":174},"Vue 文档：v-on","https:\u002F\u002Fcn.vuejs.org\u002Fapi\u002Fbuilt-in-directives.html#v-on",{"title":5,"description":156},{"loc":163},"posts\u002F2023\u002Fvue\u002Fvue3-event",[154,80],"tech","o-f5sxi_J_3PwSZwlFfzxnWLTtQ4yy276OZnq9ygupo",[182,186],{"title":183,"path":184,"stem":185,"date":155,"type":179,"children":-1},"消除 Vue 中 Unhandled error during execution of xxx 的警告","\u002F2023\u002Fvue\u002Funhandled-error","posts\u002F2023\u002Fvue\u002Funhandled-error",{"title":187,"path":188,"stem":189,"date":190,"type":179,"children":-1},"如何通过接口下载文件","\u002F2023\u002Fhow-to-download-excel","posts\u002F2023\u002Fhow-to-download-excel","2023-06-19",1793699838306]