\u5728\u8c03\u7528SearchForm\u7ec4\u4ef6\u65f6\uff0c\u4f7f\u7528v-on={}\u7684\u65b9\u5f0f\u7ed1\u5b9a\u4e8b\u4ef6\uff0c\u5728SearchForm\u53d1\u73b0$listeners\u4e3a\u7a7a\u5bf9\u8c61<\/p>\n
<SearchForm v-on="{ search: handleSearch, reset: handleReset }" \/><\/code><\/pre>\n\u6838\u5fc3\u539f\u56e0<\/h2>\n
Vue2 \u4e2d\u8fd9\u79cd\u5bf9\u8c61\u5f62\u5f0f\u7684 v-on \u7ed1\u5b9a\uff0c\u9ed8\u8ba4\u4e0d\u4f1a\u628a\u4e8b\u4ef6\u6302\u8f7d\u5230$listeners\u4e0a\uff0c\u800c\u662f\u4f1a\u88ab\u5f53\u4f5c\u7ec4\u4ef6\u7684 props \/ \u5c5e\u6027\u5904\u7406\uff0c\u8fd9\u662f Vue2 \u548c Vue3 \u5728 v-on \u8bed\u6cd5\u4e0a\u7684\u5173\u952e\u5dee\u5f02\uff0cVue3 \u5df2\u7edf\u4e00\u8be5\u884c\u4e3a\u3002<\/p>\n
\u89e3\u51b3\u65b9\u6cd5<\/h2>\n\n- \n
\u65b9\u68481: \u6539\u7528 Vue2 \u6807\u51c6\u7684\u591a\u4e8b\u4ef6\u5206\u5f00\u7ed1\u5b9a\uff08\u6700\u63a8\u8350\uff09<\/p>\n
<SearchForm @search="handleSearch" @reset="handleReset" \/><\/code><\/pre>\n<\/li>\n- \n
\u65b9\u68482\uff1aSearchForm\u5b50\u7ec4\u4ef6\u901a\u8fc7 props \u63a5\u6536\u5bf9\u8c61\u5f62\u5f0f\u7684\u7ed1\u5b9a\uff08\u9002\u914d\u4f60\u539f\u6765\u7684\u7236\u7ec4\u4ef6\u5199\u6cd5\uff09<\/p>\n
\u5982\u679c\u60f3\u4fdd\u7559\u7236\u7ec4\u4ef6v-on="{ ... }"\u7684\u5199\u6cd5\uff0c\u5b50\u7ec4\u4ef6\u9700\u8981\u628a\u8fd9\u4e9b\u300c\u4f2a\u4e8b\u4ef6\u300d\u5f53\u4f5cprops \u5c5e\u6027\u63a5\u6536\uff0c\u518d\u624b\u52a8\u8c03\u7528<\/p>\n
<template>\n<div>\n <button @click="handleClickSearch">\u641c\u7d22<\/button>\n <button @click="handleClickReset">\u91cd\u7f6e<\/button>\n<\/div>\n<\/template>\n<script>\nexport default {\n\/\/ \u63a5\u6536\u7236\u7ec4\u4ef6v-on\u5bf9\u8c61\u4e2d\u7684\u65b9\u6cd5\u4f5c\u4e3aprops\nprops: {\nsearch: {\n type: Function,\n required: true\n},\nreset: {\n type: Function,\n required: true\n}\n},\nmethods: {\nhandleClickSearch() {\n \/\/ \u8c03\u7528\u7236\u7ec4\u4ef6\u4f20\u9012\u7684search\u65b9\u6cd5\uff0c\u53ef\u4f20\u53c2\n this.search({ keyword: 'test' });\n},\nhandleClickReset() {\n \/\/ \u8c03\u7528\u7236\u7ec4\u4ef6\u4f20\u9012\u7684reset\u65b9\u6cd5\n this.reset();\n}\n}\n};\n<\/script><\/code><\/pre>\n \u6ce8\u610f\uff1a\u8fd9\u79cd\u65b9\u5f0f\u672c\u8d28\u662f\u4f20\u65b9\u6cd5 props\uff0c\u5e76\u975e Vue \u7684\u300c\u4e8b\u4ef6\u901a\u4fe1\u300d\uff0cVue \u5b98\u65b9\u4e0d\u63a8\u8350\u9891\u7e41\u8fd9\u4e48\u505a\uff08props \u66f4\u9002\u5408\u4f20\u6570\u636e\uff0c\u4e8b\u4ef6\u9002\u5408\u5b50\u5411\u7236\u901a\u4fe1\uff09\u3002<\/strong><\/p>\n<\/li>\n- \n
\u65b9\u68483\uff1a\u624b\u52a8\u628a$attrs\u4e2d\u7684\u65b9\u6cd5\u6302\u8f7d\u5230listeners\uff08\u8fdb\u9636\u6280\u5de7\uff0c\u4e0d\u63a8\u8350\u65b0\u624b\uff09<\/p>\n
\u56e0\u4e3a\u5bf9\u8c61\u5f62\u5f0f\u7684 v-on \u7ed1\u5b9a\u4f1a\u88ab\u653e\u5230$attrs\u4e2d\uff08Vue2 \u4e2d\uff0c\u672a\u88ab props \u63a5\u6536\u7684\u5c5e\u6027\u90fd\u4f1a\u5b58\u5728$attrs\uff09\uff0c\u6240\u4ee5\u53ef\u5728\u5b50\u7ec4\u4ef6\u7684created\u94a9\u5b50\u4e2d\uff0c\u624b\u52a8\u628a$attrs\u4e2d\u7684\u65b9\u6cd5\u5408\u5e76\u5230$listeners\uff0c\u5b9e\u73b0\u517c\u5bb9\uff1a<\/p>\n
<!-- \u5b50\u7ec4\u4ef6 SearchForm.vue -->\n<script>\nexport default {\n created() {\n \/\/ \u628a$attrs\u4e2d\u7684\u65b9\u6cd5\uff08\u7236\u7ec4\u4ef6v-on\u5bf9\u8c61\u7ed1\u5b9a\u7684\uff09\u5408\u5e76\u5230$listeners\n Object.assign(this.$listeners, this.$attrs);\n \/\/ \u6b64\u65f6\u6253\u5370$listeners\u5c31\u80fd\u62ff\u5230search\u548creset\u4e86\n console.log(this.$listeners); \/\/ { search: fn, reset: fn }\n }\n};\n<\/script><\/code><\/pre>\n\u7f3a\u70b9\uff1a\u8fd9\u79cd\u65b9\u5f0f\u662f\u300chack \u6280\u5de7\u300d\uff0c\u7834\u574f\u4e86 Vue2 \u7684\u539f\u751f\u8bbe\u8ba1\uff0c\u53ef\u8bfb\u6027\u5dee\uff0c\u540e\u671f\u7ef4\u62a4\u5bb9\u6613\u51fa\u95ee\u9898\uff0c\u975e\u7279\u6b8a\u573a\u666f<\/strong><\/p>\n<\/li>\n<\/ol>\n\u8865\u5145: Vue2 \u4e2d $listeners \u7684\u6838\u5fc3\u7279\u6027<\/h2>\n\n- $listeners\u4ec5\u6536\u96c6\u901a\u8fc7@\u4e8b\u4ef6\u540d\u76f4\u63a5\u7ed1\u5b9a\u7684\u539f\u751f \/ \u81ea\u5b9a\u4e49\u4e8b\u4ef6\uff0c\u4e0d\u5305\u542b\u5bf9\u8c61\u5f62\u5f0f v-on\u3001v-bind \u7ed1\u5b9a\u7684\u65b9\u6cd5 \/ \u5c5e\u6027\uff1b<\/li>\n
- $listeners\u662f\u53ea\u8bfb\u5bf9\u8c61\uff0cVue2 \u4e2d\u4e0d\u80fd\u76f4\u63a5\u4fee\u6539\uff08\u5982this.$listeners.search = fn\u65e0\u6548\uff09\uff0c\u9700\u901a\u8fc7Object.assign\u5408\u5e76\uff08\u65b9\u6848 3 \u7684\u539f\u7406\uff09\uff1b<\/li>\n
- \u53ef\u901a\u8fc7v-on="$listeners"\u5c06\u7236\u7ec4\u4ef6\u7684\u6240\u6709\u4e8b\u4ef6\u76d1\u542c\u900f\u4f20\u7ed9\u5b50\u7ec4\u4ef6\u7684\u5185\u90e8\u5143\u7d20\uff08\u6bd4\u5982\u5b50\u7ec4\u4ef6\u4e2d\u7684 input\u3001button\uff09\uff0c\u5b9e\u73b0\u4e8b\u4ef6\u900f\u4f20\uff1b<\/li>\n
- Vue2.4 + \u65b0\u589einheritAttrs: false\uff0c\u53ef\u963b\u6b62\u7236\u7ec4\u4ef6\u7684\u975e props \u5c5e\u6027\u88ab\u6e32\u67d3\u5230\u5b50\u7ec4\u4ef6\u7684\u6839\u5143\u7d20\u4e0a\uff0c\u4f46\u4e0d\u5f71\u54cd$attrs\u548c$listeners\u7684\u6536\u96c6\u3002<\/li>\n<\/ol>\n
\u603b\u7ed3<\/h2>\n\n- \u6838\u5fc3\u539f\u56e0\uff1aVue2 \u4e2d\u5bf9\u8c61\u5f62\u5f0f\u7684v-on="{ ... }"\u4e0d\u4f1a\u6302\u8f7d\u5230$listeners\uff0c\u800c\u662f\u88ab\u5f53\u4f5c\u7ec4\u4ef6\u5c5e\u6027\u653e\u5230$attrs\u4e2d\uff08Vue3 \u5df2\u4fee\u590d\u8be5\u5dee\u5f02\uff0c\u5bf9\u8c61\u5f62\u5f0f v-on \u4e5f\u4f1a\u88ab\u6536\u96c6\u5230 emits\/listeners\uff09\uff1b<\/li>\n
- \u6700\u4f18\u89e3\u51b3\u65b9\u6848\uff1a\u6539\u7528 Vue2 \u6807\u51c6\u7684@search="handleSearch" @reset="handleReset"\u5206\u5f00\u7ed1\u5b9a\u4e8b\u4ef6\uff0c\u7b26\u5408 Vue2 \u7684\u4e8b\u4ef6\u8bbe\u8ba1\uff0c\u5b50\u7ec4\u4ef6$listeners\u80fd\u6b63\u5e38\u6536\u96c6\uff1b<\/li>\n
- \u4e34\u65f6\u9002\u914d\u65b9\u6848\uff1a\u82e5\u60f3\u4fdd\u7559\u7236\u7ec4\u4ef6\u5199\u6cd5\uff0c\u53ef\u8ba9\u5b50\u7ec4\u4ef6\u901a\u8fc7props \u63a5\u6536\u65b9\u6cd5\uff0c\u4f46\u8fd9\u5e76\u975e\u5b98\u65b9\u63a8\u8350\u7684\u4e8b\u4ef6\u901a\u4fe1\u65b9\u5f0f\u3002<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"
\u95ee\u9898 \u5728\u8c03\u7528SearchForm\u7ec4\u4ef6\u65f6\uff0c\u4f7f\u7528v-on={}\u7684\u65b9\u5f0f\u7ed1\u5b9a\u4e8b\u4ef6\uff0c\u5728SearchForm\u53d1\u73b0$list … <\/p>\n