{"id":535,"date":"2025-12-06T15:56:22","date_gmt":"2025-12-06T07:56:22","guid":{"rendered":"https:\/\/www.52runoob.com\/?p=535"},"modified":"2025-12-06T15:56:22","modified_gmt":"2025-12-06T07:56:22","slug":"vue-3-%e4%b8%ad%e7%88%b6%e5%ad%90%e7%bb%84%e4%bb%b6%e5%8f%8c%e5%90%91%e7%bb%91%e5%ae%9a%e7%9a%84-4-%e7%a7%8d%e6%96%b9%e5%bc%8f%e6%9c%80%e6%96%b0%e6%8e%a8%e8%8d%90","status":"publish","type":"post","link":"https:\/\/www.52runoob.com\/index.php\/2025\/12\/06\/vue-3-%e4%b8%ad%e7%88%b6%e5%ad%90%e7%bb%84%e4%bb%b6%e5%8f%8c%e5%90%91%e7%bb%91%e5%ae%9a%e7%9a%84-4-%e7%a7%8d%e6%96%b9%e5%bc%8f%e6%9c%80%e6%96%b0%e6%8e%a8%e8%8d%90\/","title":{"rendered":"Vue\u00a03\u00a0\u4e2d\u7236\u5b50\u7ec4\u4ef6\u53cc\u5411\u7ed1\u5b9a\u7684\u00a04\u00a0\u79cd\u65b9\u5f0f(\u6700\u65b0\u63a8\u8350)"},"content":{"rendered":"\n<p>\u5728 Vue 3 \u4e2d\uff0c\u7236\u5b50\u7ec4\u4ef6\u4e4b\u95f4\u60f3\u8981 \u201c\u53cc\u5411\u7ed1\u5b9a\u201d\uff08parent \u2194 child\uff09\u65f6\uff0c\u5e38\u89c1\u6709\u597d\u51e0\u79cd\u65b9\u5f0f\uff0f\u601d\u8def\u3002\u4ee5\u4e0b\u662f<strong>4 \u79cd\u5e38\u7528 \/ \u63a8\u8350<\/strong>\u7684\u65b9\u5f0f \u2014 \u5e76\u8bf4\u660e\u5b83\u4eec\u9002\u5408\u4ec0\u4e48\u573a\u666f \u2705<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\ud83d\udd04 \u56db\u79cd\u7236\u5b50\u53cc\u5411\uff0f\u8fd1\u4f3c\u53cc\u5411\u7ed1\u5b9a\u65b9\u5f0f<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>\u65b9\u5f0f 1 \u2014 <code>v-model<\/code>\uff08\u4f20\u7edf props + emit\uff09<\/strong><\/h3>\n\n\n\n<p>\u8fd9\u662f Vue 3 \u6700\u57fa\u7840\u3001\u517c\u5bb9\u6027\u4e5f\u6700\u597d\u7684\u505a\u6cd5\u3002<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u5b50\u7ec4\u4ef6\u5b9a\u4e49 <code>props: ['modelValue']<\/code>\uff0c\u540c\u65f6 <code>emits: ['update:modelValue']<\/code>\u3002 (<a href=\"https:\/\/vueschool.io\/articles\/vuejs-tutorials\/v-model-and-definemodel-a-comprehensive-guide-to-two-way-binding-in-vue-js-3\/?utm_source=chatgpt.com\">Vue School<\/a>)<\/li>\n\n\n\n<li>\u5728\u6a21\u677f\u4e2d\u628a\u8fd9\u4e2a prop \u7ed1\u5b9a\u7ed9\u8f93\u5165\u5143\u7d20\uff0f\u5b50\u7ec4\u4ef6\u5185\u90e8\u72b6\u6001\uff08\u4f8b\u5982 <code>&lt;input :value=\"modelValue\" @input=\"$emit('update:modelValue', $event.target.value)\" \/><\/code>\uff09\u3002 (<a href=\"https:\/\/vueschool.io\/articles\/vuejs-tutorials\/v-model-and-definemodel-a-comprehensive-guide-to-two-way-binding-in-vue-js-3\/?utm_source=chatgpt.com\">Vue School<\/a>)<\/li>\n\n\n\n<li>\u7236\u7ec4\u4ef6\u4f7f\u7528 <code>&lt;ChildComponent v-model=\"someData\" \/><\/code>\uff0c\u5c31\u4f1a\u81ea\u52a8\u53d8\u4e3a <code>:modelValue=\"someData\" @update:modelValue=\"someData = \u2026\"<\/code>\uff0c\u4ece\u800c\u5b9e\u73b0\u53cc\u5411\u6570\u636e\u540c\u6b65\u3002 (<a href=\"https:\/\/pipo.blog\/articles\/20220714-vue3-v-model-binding?utm_source=chatgpt.com\">pipo.blog<\/a>)<\/li>\n<\/ul>\n\n\n\n<p><strong>\u4f18\u70b9<\/strong>\uff1a\u6e05\u6670\u3001\u660e\u786e\uff0c\u517c\u5bb9\u6027\u597d\u3002<br><strong>\u9002\u5408<\/strong>\uff1a\u5927\u90e8\u5206\u7236\u5b50\u7ec4\u4ef6\u4e4b\u95f4\u9700\u8981 \u201c\u7b80\u5355\u503c\/\u8868\u5355\u9879 + \u53cc\u5411\u540c\u6b65\u201d \u7684\u573a\u666f\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>\u65b9\u5f0f 2 \u2014 <code>v-model<\/code> + \u81ea\u5b9a\u4e49 prop\/event \u540d\uff08multiple <code>v-model<\/code>s\uff09<\/strong><\/h3>\n\n\n\n<p>\u5982\u679c\u5b50\u7ec4\u4ef6\u4e0d\u4ec5\u4ec5\u662f\u4e00\u4e2a value\uff0c\u800c\u662f\u6709\u591a\u4e2a\u53ef\u53cc\u5411\u7ed1\u5b9a\u7684\u5b57\u6bb5\uff0cVue 3 \u652f\u6301\u7ed9 <code>v-model<\/code> \u6307\u5b9a\u540d\u5b57\uff0c\u4ece\u800c\u8ba9\u4e00\u4e2a\u5b50\u7ec4\u4ef6\u540c\u65f6\u652f\u6301\u591a\u4e2a\u53cc\u5411\u7ed1\u5b9a\u3002 (<a href=\"https:\/\/v3-migration.vuejs.org\/breaking-changes\/v-model.html?utm_source=chatgpt.com\">v3-migration.vuejs.org<\/a>)<\/p>\n\n\n\n<p>\u4f8b\u5982\uff1a<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n&amp;lt;ChildComponent v-model:firstName=&quot;first&quot; v-model:lastName=&quot;last&quot; \/&gt;\n\n<\/pre><\/div>\n\n\n<p>\u5b50\u7ec4\u4ef6\u5185\u90e8\u5c31\u5206\u522b\u5b9a\u4e49 <code>props: ['firstName', 'lastName']<\/code>\uff0c\u5e76 <code>emit('update:firstName', \u2026)<\/code> \/ <code>emit('update:lastName', \u2026)<\/code>\u3002 (<a href=\"https:\/\/vue.uz\/guide\/components\/v-model?utm_source=chatgpt.com\">vue.uz<\/a>)<\/p>\n\n\n\n<p><strong>\u4f18\u70b9<\/strong>\uff1a\u7ec4\u4ef6\u66f4\u7075\u6d3b\uff0c\u53ef\u4ee5\u4e00\u6b21\u7ba1\u7406\u591a\u4e2a\u5b57\u6bb5\u3002<br><strong>\u9002\u5408<\/strong>\uff1a\u590d\u6742\u8868\u5355\u573a\u666f\uff0c\u6216\u9700\u8981\u5728\u4e00\u4e2a\u5b50\u7ec4\u4ef6\u4e2d\u53cc\u5411\u7ed1\u5b9a\u591a\u4e2a\u6570\u636e\u5b57\u6bb5\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>\u65b9\u5f0f 3 \u2014 \u65b0\u8bed\u6cd5 <code>defineModel()<\/code>\uff08Vue 3.3+\uff09<\/strong><\/h3>\n\n\n\n<p>\u4ece Vue 3.3+ \u5f00\u59cb\uff0c\u5f15\u5165\u4e86\u5b8f <code>defineModel()<\/code>\uff0c\u53ef\u4ee5\u7b80\u5316 <code>v-model<\/code> \u5728\u5b50\u7ec4\u4ef6\u91cc\u7684\u5b9a\u4e49 \u2014\u2014 \u4e0d\u9700\u8981\u624b\u52a8\u5199 props + emit\u3002 (<a href=\"https:\/\/ar.vuejs.org\/guide\/components\/v-model.html?utm_source=chatgpt.com\">ar.vuejs.org<\/a>)<\/p>\n\n\n\n<p>\u4e3e\u4f8b\uff08\u5b50\u7ec4\u4ef6\uff09\uff1a<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n&amp;lt;script setup&gt;\nconst value = defineModel&amp;lt;string&gt;()\n&amp;lt;\/script&gt;\n\n&amp;lt;template&gt;\n  &amp;lt;input v-model=&quot;value&quot; \/&gt;\n&amp;lt;\/template&gt;\n\n<\/pre><\/div>\n\n\n<p>\u7236\u7ec4\u4ef6\u4ecd\u7136\u4f7f\u7528 <code>&lt;Child v-model=\"someRef\" \/&gt;<\/code>\u3002\u8fd9\u6837 <code>value<\/code> \u7684\u53d8\u5316\u4f1a\u81ea\u52a8\u89e6\u53d1\u7236\u7ec4\u4ef6\u7684\u66f4\u65b0\u3002 (<a href=\"https:\/\/vueschool.io\/articles\/vuejs-tutorials\/v-model-and-definemodel-a-comprehensive-guide-to-two-way-binding-in-vue-js-3\/?utm_source=chatgpt.com\">Vue School<\/a>)<\/p>\n\n\n\n<p><strong>\u4f18\u70b9<\/strong>\uff1a\u4ee3\u7801\u7b80\u6d01\uff0c\u51cf\u5c11 boilerplate\uff1b\u5bf9\u65b0\u9879\u76ee\u5c24\u5176\u63a8\u8350\u3002<br><strong>\u9002\u5408<\/strong>\uff1a\u65b0\u9879\u76ee\uff0f\u7528 Composition API + <code>&lt;script setup&gt;<\/code> \u7684\u573a\u666f\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>\u65b9\u5f0f 4 \u2014 \u7236\u901a\u8fc7 props \u4e0b\u53d1 + \u5b50\u901a\u8fc7 <code>$emit<\/code> \u81ea\u5b9a\u4e49\u4e8b\u4ef6 \u901a\u77e5\u7236 (\u975e v-model)<\/strong><\/h3>\n\n\n\n<p>\u6709\u65f6\u5019\u4f60\u4e0d\u60f3\u3001\u6216\u4e0d\u9700\u8981\u4f7f\u7528 <code>v-model<\/code>\uff0c\u53ea\u662f\u60f3\u8ba9\u5b50\u7ec4\u4ef6\u201c\u52a8\u4f5c\u201d\u901a\u77e5\u7236\u7ec4\u4ef6\u3002<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u7236\u7ec4\u4ef6\u901a\u8fc7 props \u7ed9\u5b50\u7ec4\u4ef6\u4f20\u5165\u503c\u6216\u65b9\u6cd5\uff08\u6216\u8005\u5176\u4ed6\u63a7\u5236\u72b6\u6001\uff0f\u56de\u8c03\u51fd\u6570\uff09\uff1b<\/li>\n\n\n\n<li>\u5b50\u7ec4\u4ef6\u901a\u8fc7 <code>$emit('someEvent', payload)<\/code> \u5411\u7236\u7ec4\u4ef6\u53d1\u4e8b\u4ef6\uff1b\u7236\u7ec4\u4ef6\u5728 <code>&lt;Child @someEvent=\"handler\" \/><\/code> \u4e2d\u63a5\u6536\u5e76\u66f4\u65b0\u6570\u636e\uff0f\u72b6\u6001\u3002 (<a href=\"https:\/\/m.php.cn\/en\/faq\/1796855184.html?utm_source=chatgpt.com\">PHP\u4e2d\u6587\u7f51<\/a>)<\/li>\n<\/ul>\n\n\n\n<p>\u8fd9\u4e2a\u5176\u5b9e\u4e0d\u662f\u4e25\u683c\u610f\u4e49\u4e0a\u7684\u201c\u53cc\u5411\u7ed1\u5b9a\u201d \u2014\u2014 \u66f4\u51c6\u786e\u5730\u8bf4\u662f\u300c\u5355\u5411 props + \u5b50 \u2192 \u7236 \u4e8b\u4ef6\u901a\u77e5\u300d\u3002\u4f46\u5728\u5f88\u591a UI \u573a\u666f\u4e0b\uff0c\u8fd9\u79cd\u65b9\u5f0f\u80fd\u8fbe\u5230\u7c7b\u4f3c\u201c\u7236\u5b50\u540c\u6b65 + \u53cc\u5411\u66f4\u65b0\u201d\u7684\u6548\u679c\u3002<\/p>\n\n\n\n<p><strong>\u4f18\u70b9<\/strong>\uff1a\u8bed\u4e49\u660e\u786e\uff0c\u884c\u4e3a\u6e05\u6670\uff0c\u9002\u5408\u590d\u6742\u4ea4\u4e92\uff0c\u4e0d\u5c40\u9650\u4e8e\u201c\u503c\u540c\u6b65\u201d\u3002<br><strong>\u9002\u5408<\/strong>\uff1a\u5b50\u7ec4\u4ef6\u505a\u590d\u6742\u64cd\u4f5c\uff08\u6bd4\u5982\u89e6\u53d1\u67d0\u4e9b\u52a8\u4f5c\u3001\u5e26\u4e0a\u989d\u5916\u53c2\u6570\u8c03\u7528\u7236\u65b9\u6cd5\uff09\u800c\u4e0d\u4ec5\u662f\u7b80\u5355\u8f93\u5165\uff0f\u72b6\u6001\u540c\u6b65\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\u2705 \u63a8\u8350\u9009\u62e9 &amp; \u4f7f\u7528\u5efa\u8bae<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u5982\u679c\u76ee\u6807\u662f\u300c\u5b50\u7ec4\u4ef6\u4f5c\u4e3a\u8f93\u5165\uff0f\u8868\u5355\u7ec4\u4ef6\u300d \u2192 \u9996\u9009 <strong>\u65b9\u5f0f 1 (v-model + modelValue\/emit)<\/strong>\uff1b<\/li>\n\n\n\n<li>\u5982\u679c\u5b50\u7ec4\u4ef6\u6d89\u53ca\u591a\u4e2a\u53ef\u53d8\u5b57\u6bb5 \u2192 <strong>\u65b9\u5f0f 2 (multiple v-model)<\/strong> \u66f4\u5408\u9002\uff1b<\/li>\n\n\n\n<li>\u5bf9\u4e8e\u65b0\u7684 Vue 3 \u9879\u76ee + <code>&lt;script setup><\/code>\uff0c\u8ffd\u6c42\u7b80\u6d01 \u2192 <strong>\u65b9\u5f0f 3 (defineModel)<\/strong> \u662f\u5f53\u524d\u63a8\u8350\u65b9\u5f0f\uff1b<\/li>\n\n\n\n<li>\u5982\u679c\u5b50\u7ec4\u4ef6\u8bbe\u8ba1\u4e3a\u201c\u89e6\u53d1\u64cd\u4f5c\uff0f\u901a\u77e5\u7236\u505a\u4e8b\u201d\u800c\u4e0d\u4ec5\u4ec5\u662f\u6570\u636e\u540c\u6b65 \u2192 <strong>\u65b9\u5f0f 4 (props + emit)<\/strong> \u6700\u7075\u6d3b\u3001\u5b89\u5168\u3002<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\u26a0\ufe0f \u6ce8\u610f\u4e8b\u9879 \/ \u5e38\u89c1\u5751<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u5207\u52ff\u5728\u5b50\u7ec4\u4ef6\u4e2d\u76f4\u63a5\u4fee\u6539 <code>props<\/code>\uff0cVue \u4f1a\u63d0\u9192\u4e0d\u7b26\u5408\u5355\u5411\u6570\u636e\u6d41\u539f\u5219\u3002 (<a href=\"https:\/\/pipo.blog\/articles\/20220714-vue3-v-model-binding?utm_source=chatgpt.com\">pipo.blog<\/a>)<\/li>\n\n\n\n<li>\u5982\u679c\u4f7f\u7528 <code>v-model<\/code>\uff0c\u52a1\u5fc5\u786e\u4fdd\u5b50\u7ec4\u4ef6 emit \u7684\u4e8b\u4ef6\u540d\u662f\u6b63\u786e\u7684\uff08\u9ed8\u8ba4 <code>update:modelValue<\/code> \u6216\u81ea\u5b9a\u4e49 <code>update:xxx<\/code>\uff09\u3002 (<a href=\"https:\/\/bnowdev.com\/blog\/understanding-v-model-in-vue-3-components--modelvalue-emit-and-definemodel\/?utm_source=chatgpt.com\">bnowdev.com<\/a>)<\/li>\n\n\n\n<li>\u5982\u679c\u4e00\u4e2a\u5b50\u7ec4\u4ef6\u540c\u65f6\u6709\u591a\u4e2a\u53cc\u5411\u5b57\u6bb5\uff0c\u4e0d\u8981\u628a\u5b83\u4eec\u6df7\u5728\u4e00\u8d77\uff0c\u8981\u7528\u591a\u4e2a <code>v-model:xxx<\/code>\u3002 (<a href=\"https:\/\/vue.uz\/guide\/components\/v-model?utm_source=chatgpt.com\">vue.uz<\/a>)<\/li>\n<\/ul>\n\n\n\n<p>\u4e0b\u9762\u76f4\u63a5\u7ed9\u4f60<strong>4 \u79cd\u65b9\u5f0f<\/strong>\u7684 <strong>\u53ef\u76f4\u63a5\u590d\u5236\u8fd0\u884c<\/strong>\u7684\u793a\u4f8b\u4ee3\u7801\uff08\u7236\u7ec4\u4ef6 + \u5b50\u7ec4\u4ef6\uff09\uff0c\u5168\u90e8\u57fa\u4e8e Vue 3 + <code>&lt;script setup&gt;<\/code>\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">\u2705 <strong>\u65b9\u5f0f 1\uff1a\u6700\u5e38\u7528\u7684 v-model\uff08modelValue + update:modelValue\uff09<\/strong><\/h1>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Child.vue<\/strong><\/h2>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n&amp;lt;!-- Child.vue --&gt;\n&amp;lt;script setup&gt;\ndefineProps({\n  modelValue: String\n})\n\nconst emit = defineEmits(&#x5B;&#039;update:modelValue&#039;])\n\nfunction onInput(e) {\n  emit(&#039;update:modelValue&#039;, e.target.value)\n}\n&amp;lt;\/script&gt;\n\n&amp;lt;template&gt;\n  &amp;lt;input :value=&quot;modelValue&quot; @input=&quot;onInput&quot; placeholder=&quot;\u65b9\u5f0f1\uff1a\u8bf7\u8f93\u5165\u2026&quot; \/&gt;\n&amp;lt;\/template&gt;\n\n<\/pre><\/div>\n\n\n<h2 class=\"wp-block-heading\"><strong>Parent.vue<\/strong><\/h2>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n&amp;lt;!-- Parent.vue --&gt;\n&amp;lt;script setup&gt;\nimport { ref } from &#039;vue&#039;\nimport Child from &#039;.\/Child.vue&#039;\n\nconst text = ref(&#039;&#039;)\n&amp;lt;\/script&gt;\n\n&amp;lt;template&gt;\n  &amp;lt;h3&gt;\u65b9\u5f0f 1\uff1av-model\uff08\u6807\u51c6\uff09&amp;lt;\/h3&gt;\n  &amp;lt;Child v-model=&quot;text&quot; \/&gt;\n  &amp;lt;p&gt;\u7236\u7ec4\u4ef6\u63a5\u6536\u5230\uff1a{{ text }}&amp;lt;\/p&gt;\n&amp;lt;\/template&gt;\n\n<\/pre><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">\u2705 <strong>\u65b9\u5f0f 2\uff1a\u591a\u4e2a v-model\uff08\u81ea\u5b9a\u4e49 v-model \u540d\uff09<\/strong><\/h1>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>ChildMulti.vue<\/strong><\/h2>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n&amp;lt;script setup&gt;\ndefineProps({\n  firstName: String,\n  lastName: String\n})\n\nconst emit = defineEmits(&#x5B;&#039;update:firstName&#039;, &#039;update:lastName&#039;])\n&amp;lt;\/script&gt;\n\n&amp;lt;template&gt;\n  &amp;lt;input :value=&quot;firstName&quot; @input=&quot;e =&gt; emit(&#039;update:firstName&#039;, e.target.value)&quot; placeholder=&quot;\u59d3\u2026&quot; \/&gt;\n  &amp;lt;input :value=&quot;lastName&quot; @input=&quot;e =&gt; emit(&#039;update:lastName&#039;, e.target.value)&quot; placeholder=&quot;\u540d\u2026&quot; \/&gt;\n&amp;lt;\/template&gt;\n\n<\/pre><\/div>\n\n\n<h2 class=\"wp-block-heading\"><strong>Parent.vue<\/strong><\/h2>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n&amp;lt;script setup&gt;\nimport { ref } from &#039;vue&#039;\nimport ChildMulti from &#039;.\/ChildMulti.vue&#039;\n\nconst first = ref(&#039;&#039;)\nconst last = ref(&#039;&#039;)\n&amp;lt;\/script&gt;\n\n&amp;lt;template&gt;\n  &amp;lt;h3&gt;\u65b9\u5f0f 2\uff1a\u591a\u4e2a v-model&amp;lt;\/h3&gt;\n  &amp;lt;ChildMulti v-model:firstName=&quot;first&quot; v-model:lastName=&quot;last&quot; \/&gt;\n  &amp;lt;p&gt;\u59d3\uff1a{{ first }}\uff0c\u540d\uff1a{{ last }}&amp;lt;\/p&gt;\n&amp;lt;\/template&gt;\n\n<\/pre><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">\u2705 <strong>\u65b9\u5f0f 3\uff1adefineModel\uff08Vue 3.3+ \u6700\u63a8\u8350\uff09<\/strong><\/h1>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>ChildDefineModel.vue<\/strong><\/h2>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n&amp;lt;script setup&gt;\nconst value = defineModel()   \/\/ \u81ea\u52a8\u751f\u6210 props + emit\n&amp;lt;\/script&gt;\n\n&amp;lt;template&gt;\n  &amp;lt;input v-model=&quot;value&quot; placeholder=&quot;\u65b9\u5f0f3\uff1a\u8bf7\u8f93\u5165\u2026&quot; \/&gt;\n&amp;lt;\/template&gt;\n\n<\/pre><\/div>\n\n\n<h2 class=\"wp-block-heading\"><strong>Parent.vue<\/strong><\/h2>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n&amp;lt;script setup&gt;\nimport { ref } from &#039;vue&#039;\nimport ChildDefineModel from &#039;.\/ChildDefineModel.vue&#039;\n\nconst msg = ref(&#039;&#039;)\n&amp;lt;\/script&gt;\n\n&amp;lt;template&gt;\n  &amp;lt;h3&gt;\u65b9\u5f0f 3\uff1adefineModel\uff08\u63a8\u8350\uff09&amp;lt;\/h3&gt;\n  &amp;lt;ChildDefineModel v-model=&quot;msg&quot; \/&gt;\n  &amp;lt;p&gt;\u7236\u7ec4\u4ef6\u63a5\u6536\u5230\uff1a{{ msg }}&amp;lt;\/p&gt;\n&amp;lt;\/template&gt;\n\n<\/pre><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">\u2705 <strong>\u65b9\u5f0f 4\uff1aprops \u4e0b\u53d1 + emit \u901a\u77e5\u7236\uff08\u975e\u4e25\u683c\u53cc\u5411\uff0c\u4f46\u5e38\u7528\uff09<\/strong><\/h1>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>ChildEmit.vue<\/strong><\/h2>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n&amp;lt;script setup&gt;\nconst props = defineProps({\n  count: Number\n})\n\nconst emit = defineEmits(&#x5B;&#039;increment&#039;])\n&amp;lt;\/script&gt;\n\n&amp;lt;template&gt;\n  &amp;lt;button @click=&quot;emit(&#039;increment&#039;)&quot;&gt;\n    \u5b50\u7ec4\u4ef6\u6309\u94ae\uff08\u5f53\u524d\uff1a{{ props.count }}\uff09\n  &amp;lt;\/button&gt;\n&amp;lt;\/template&gt;\n\n<\/pre><\/div>\n\n\n<h2 class=\"wp-block-heading\"><strong>Parent.vue<\/strong><\/h2>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n&amp;lt;script setup&gt;\nimport { ref } from &#039;vue&#039;\nimport ChildEmit from &#039;.\/ChildEmit.vue&#039;\n\nconst count = ref(0)\n\nfunction add() {\n  count.value++\n}\n&amp;lt;\/script&gt;\n\n&amp;lt;template&gt;\n  &amp;lt;h3&gt;\u65b9\u5f0f 4\uff1aprops + emit\uff08\u4e8b\u4ef6\u4e0a\u62a5\uff09&amp;lt;\/h3&gt;\n  &amp;lt;ChildEmit :count=&quot;count&quot; @increment=&quot;add&quot; \/&gt;\n  &amp;lt;p&gt;\u7236\u7ec4\u4ef6 count\uff1a{{ count }}&amp;lt;\/p&gt;\n&amp;lt;\/template&gt;\n\n<\/pre><\/div>","protected":false},"excerpt":{"rendered":"<p>\u5728 Vue 3 \u4e2d\uff0c\u7236\u5b50\u7ec4\u4ef6\u4e4b\u95f4\u60f3\u8981 \u201c\u53cc\u5411\u7ed1\u5b9a\u201d\uff08parent \u2194 child&#8230; <a class=\"more-link\" href=\"https:\/\/www.52runoob.com\/index.php\/2025\/12\/06\/vue-3-%e4%b8%ad%e7%88%b6%e5%ad%90%e7%bb%84%e4%bb%b6%e5%8f%8c%e5%90%91%e7%bb%91%e5%ae%9a%e7%9a%84-4-%e7%a7%8d%e6%96%b9%e5%bc%8f%e6%9c%80%e6%96%b0%e6%8e%a8%e8%8d%90\/\">Continue Reading &rarr;<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[49],"tags":[],"class_list":["post-535","post","type-post","status-publish","format-standard","hentry","category-javascript"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts\/535","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/comments?post=535"}],"version-history":[{"count":1,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts\/535\/revisions"}],"predecessor-version":[{"id":536,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts\/535\/revisions\/536"}],"wp:attachment":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/media?parent=535"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/categories?post=535"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/tags?post=535"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}