{"@attributes":{"version":"2.0"},"channel":{"title":"code\u524d\u7aef\u7f51","link":"https:\/\/codeqd.com\/","description":"\u5b66\u6280\u672f\uff0c\u6765code\u524d\u7aef\u5f00\u53d1\u7f51","item":[{"title":"Vue3 defineModel \u600e\u4e48\u7ed9 v-model \u505a\u7c7b\u578b\u7ea6\u675f\uff1f","link":"https:\/\/codeqd.com\/post\/20260321722.html","description":"

\u505a Vue \u9879\u76ee\u65f6\uff0c\u7528 v-model<\/code> \u505a\u53cc\u5411\u7ed1\u5b9a\u5f88\u5e38\u89c1\uff0c\u4f46\u9047\u5230 TS \u7c7b\u578b\u95ee\u9898\u5c31\u5934\u5927\uff1f\u5c24\u5176\u662f Vue3.4 \u63a8\u51fa defineModel<\/code> \u540e\uff0c\u600e\u4e48\u7ed9 v-model<\/code> \u52a0\u4e0a\u7c7b\u578b\u7ea6\u675f\uff0c\u8ba9\u7ec4\u4ef6\u66f4\u201c\u5b89\u5168\u201d\uff1f\u4eca\u5929\u4ece\u57fa\u7840\u5230\u590d\u6742\u573a\u666f\uff0c\u4e00\u6b65\u6b65\u62c6\u89e3 defineModel<\/code> \u7684\u7c7b\u578b\u5904\u7406\u903b\u8f91\u3002 <\/p>\n

\u5148\u641e\u61c2\uff1adefineModel \u662f\u5e72\u5565\u7684\uff1f<\/h2>\n

\u4e4b\u524d\u5199\u53cc\u5411\u7ed1\u5b9a\uff0c\u5f97\u7528 defineProps<\/code> \u58f0\u660e modelValue<\/code>\uff0c\u518d\u7528 defineEmits<\/code> \u89e6\u53d1 update:modelValue<\/code>\uff0c\u4ee3\u7801\u53c8\u591a\u53c8\u5bb9\u6613\u5199\u9519\uff0cVue3.4 \u51fa\u7684 defineModel<\/code> \u662f\u4e2a\u8bed\u6cd5\u7cd6\uff0c\u4e00\u884c\u4ee3\u7801\u66ff\u4ee3\u8fc7\u53bb\u7684 props + emit \u7ec4\u5408<\/strong>\uff0c\u8fd8\u80fd\u81ea\u52a8\u5904\u7406\u53cc\u5411\u7ed1\u5b9a\u7684\u7c7b\u578b\u5173\u8054\u3002 <\/p>\n

\u4e3e\u4e2a\u7b80\u5355\u4f8b\u5b50\uff0c\u8fc7\u53bb\u5b9e\u73b0\u8f93\u5165\u6846\u53cc\u5411\u7ed1\u5b9a\u5f97\u8fd9\u6837\uff1a <\/p>\n

<script setup lang="ts">\ndefineProps<{ modelValue: string }>()\nconst emit = defineEmits<{ (e: 'update:modelValue', val: string): void }>()\nfunction onInput(e: Event) {\n  emit('update:modelValue', (e.target as HTMLInputElement).value)\n}\n<\/script>\n<template><input :value="modelValue" @input="onInput"><\/template><\/pre>\n
\u73b0\u5728\u7528 defineModel<\/code> \u7b80\u5316\u6210\uff1a  <\/p>\n
<script setup lang="ts">\nconst model = defineModel<string>() \n<\/script>\n<template><input :value="model.value" @input="model.value = $event.target.value"><\/template><\/pre>\n
\u80fd\u770b\u5230 defineModel<\/code> \u81ea\u52a8\u5e2e\u6211\u4eec\u5173\u8054\u4e86 props<\/code> \u548c emit<\/code>\uff0c\u7c7b\u578b\u4e5f\u53ea\u9700\u8981\u58f0\u660e\u4e00\u6b21<\/strong>\uff0c\u7701\u5fc3\u4e0d\u5c11\u3002  <\/p>\n
\u57fa\u7840\u573a\u666f\uff1a\u5355\u4e00 v-model \u7684\u7c7b\u578b\u600e\u4e48\u5199\uff1f<\/h2>\n
\u5982\u679c\u7ec4\u4ef6\u53ea\u9700\u8981\u4e00\u4e2a v-model<\/code>\uff08\u6bd4\u5982\u57fa\u7840\u8f93\u5165\u6846\u7ec4\u4ef6\uff09\uff0c\u7528\u6cdb\u578b\u53c2\u6570<\/strong>\u6307\u5b9a\u7c7b\u578b\u5c31\u884c\u3002  <\/p>\n
\u5199\u6cd5\u793a\u4f8b\uff1a<\/h3>\n
<script setup lang="ts">\n\/\/ \u6cdb\u578b\u53c2\u6570 <string> \u8868\u793a modelValue \u7684\u7c7b\u578b\u662f string\nconst model = defineModel<string>() \n\/\/ \u7b49\u4ef7\u4e8e\u58f0\u660e\u4e86\uff1a\n\/\/ props: { modelValue: string }\n\/\/ emit: (e: 'update:modelValue', val: string) => void \n<\/script><\/pre>\n
\u4f5c\u7528\u5728\u54ea\uff1f<\/h3>\n
    \n
  • \u7236\u7ec4\u4ef6\u7ed1\u503c\u65f6\uff0cTS \u4f1a\u68c0\u67e5\u7c7b\u578b\uff1a\u6bd4\u5982\u7236\u7ec4\u4ef6\u7528 v-model=\"parentValue\"<\/code>\uff0cparentValue<\/code> \u5fc5\u987b\u662f string<\/code>\uff0c\u5426\u5219\u62a5\u9519\u3002  <\/li>\n
  • \u5b50\u7ec4\u4ef6\u5185\u90e8\u6539 model.value<\/code> \u65f6\uff0c\u8d4b\u503c\u7684\u7c7b\u578b\u4e5f\u5f97\u662f string<\/code>\uff0c\u907f\u514d\u4f20\u9519\u7c7b\u578b\u5bfc\u81f4\u8fd0\u884c\u65f6 bug\u3002  <\/li>\n<\/ul>\n
    \u591a v-model \u573a\u666f\uff1a\u591a\u4e2a\u53cc\u5411\u7ed1\u5b9a\u7684\u7c7b\u578b\u548b\u5904\u7406\uff1f<\/h2>\n
    \u5b9e\u9645\u5f00\u53d1\u4e2d\uff0c\u7ec4\u4ef6\u53ef\u80fd\u9700\u8981\u591a\u4e2a v-model<\/code>\uff08\u6bd4\u5982\u8868\u5355\u7ec4\u4ef6\u540c\u65f6\u7ed1\u5b9a title<\/code> \u548c content<\/code>\uff09\uff0c\u8fd9\u65f6\u5019\u6709\u4e24\u79cd\u601d\u8def\uff1a\u6cdb\u578b\u5bf9\u8c61<\/strong> \u548c \u9009\u9879\u5bf9\u8c61<\/strong>\u3002  <\/p>\n
    \u65b9\u6cd5 1\uff1a\u6cdb\u578b\u5bf9\u8c61\uff08TS \u53cb\u597d\uff0c\u63a8\u8350\uff09<\/h3>\n
    \u7528\u6cdb\u578b\u6307\u5b9a\u591a\u4e2a model \u7684\u540d\u79f0\u548c\u5bf9\u5e94\u7c7b\u578b\uff0c\u683c\u5f0f\u662f { [modelName]: \u7c7b\u578b }<\/code>\u3002  <\/p>\n
    \u793a\u4f8b\uff1a\u7ec4\u4ef6\u652f\u6301 v-model:title<\/code> \u548c v-model:content<\/code>  <\/p>\n
    <script setup lang="ts">\n\/\/ \u6cdb\u578b { title: string; content: string } \u8868\u793a\uff1a\u5bf9\u5e94 v-model:title\uff0c\u7c7b\u578b string\n\/\/ - content \u5bf9\u5e94 v-model:content\uff0c\u7c7b\u578b string\nconst title = defineModel<{ title: string }>()\nconst content = defineModel<{ content: string }>()\n<\/script><\/pre>\n
    \u7236\u7ec4\u4ef6\u4f7f\u7528\u65f6\uff0c\u7c7b\u578b\u81ea\u52a8\u5173\u8054\uff1a  <\/p>\n
    <template>\n  <FormComponent \n    v-model:title="parentTitle" \n    v-model:content="parentContent" \n  \/>\n<\/template>\n<script setup lang="ts">\nimport { ref } from 'vue'\n\/\/ parentTitle \u548c parentContent \u5fc5\u987b\u662f string \u7c7b\u578b\nconst parentTitle = ref('\u6587\u7ae0\u6807\u9898')\nconst parentContent = ref('\u6b63\u6587\u5185\u5bb9')\n<\/script><\/pre>\n
    \u65b9\u6cd5 2\uff1a\u9009\u9879\u5bf9\u8c61\uff08\u7b80\u5355\u573a\u666f\u53ef\u7528\uff09<\/h3>\n
    \u901a\u8fc7 defineModel<\/code> \u7684\u9009\u9879\u5bf9\u8c61\uff0c\u6307\u5b9a name<\/code>\uff08\u5bf9\u5e94 v-model \u7684\u53c2\u6570\uff09\u548c type<\/code>\uff08\u7c7b\u578b\uff09\u3002  <\/p>\n
    \u793a\u4f8b\uff1a\u548c\u4e0a\u9762\u529f\u80fd\u4e00\u6837\uff0c\u4f46\u5199\u6cd5\u4e0d\u540c  <\/p>\n
    <script setup lang="ts">\nconst title = defineModel({ name: 'title', type: String })\nconst content = defineModel({ name: 'content', type: String })\n<\/script><\/pre>\n
    \u8fd9\u79cd\u5199\u6cd5\u66f4\u50cf Vue2 \u7684\u98ce\u683c\uff0c\u9002\u5408 JS \u9879\u76ee\u6216\u5feb\u901f\u5199 Demo\uff0c\u4f46 TS \u9879\u76ee\u91cc\uff0c\u6cdb\u578b\u5bf9\u8c61\u7684\u65b9\u5f0f\u7c7b\u578b\u66f4\u7cbe\u786e<\/strong>\uff08type: String<\/code> \u5bf9\u5e94\u7684\u662f string | null<\/code>\uff0c\u800c\u6cdb\u578b\u53ef\u4ee5\u4e25\u683c\u6307\u5b9a string<\/code>\uff09\uff0c\u6240\u4ee5\u4f18\u5148\u7528\u6cdb\u578b\u3002  <\/p>\n
    \u5e26\u4fee\u9970\u7b26\u7684 v-model\uff1a\u7c7b\u578b\u600e\u4e48\u517c\u5bb9\u4fee\u9970\u7b26\u903b\u8f91\uff1f<\/h2>\n
    Vue \u7684 v-model<\/code> \u652f\u6301\u4fee\u9970\u7b26\uff08trim<\/code> \u53bb\u6389\u9996\u5c3e\u7a7a\u683c\u3001number<\/code> \u8f6c\u6570\u5b57\uff09\uff0c\u5b50\u7ec4\u4ef6\u8981\u652f\u6301\u4fee\u9970\u7b26\uff0c\u5f97\u5904\u7406\u4fee\u9970\u7b26\u7684\u7c7b\u578b\u58f0\u660e<\/strong>\u548c\u503c\u7684\u8f6c\u6362\u903b\u8f91<\/strong>\u3002  <\/p>\n
    \u6b65\u9aa4 1\uff1a\u58f0\u660e\u4fee\u9970\u7b26\u7684\u7c7b\u578b<\/h3>\n
    \u7528 defineModel<\/code> \u7684\u7b2c\u4e8c\u4e2a\u6cdb\u578b\u53c2\u6570\uff0c\u6307\u5b9a\u4fee\u9970\u7b26\u7684\u7ed3\u6784\uff08\u952e\u662f\u4fee\u9970\u7b26\u540d\uff0c\u503c\u662f boolean<\/code>\uff0c\u8868\u793a\u662f\u5426\u5f00\u542f\uff09\u3002  <\/p>\n
    \u793a\u4f8b\uff1a\u652f\u6301 trim<\/code> \u4fee\u9970\u7b26\u7684\u8f93\u5165\u6846  <\/p>\n
    <script setup lang="ts">\n\/\/ \u7b2c\u4e00\u4e2a\u6cdb\u578b\uff1amodelValue \u7684\u7c7b\u578b\uff08string\uff09\n\/\/ \u7b2c\u4e8c\u4e2a\u6cdb\u578b\uff1a\u4fee\u9970\u7b26\u7684\u7c7b\u578b\uff08{ trim?: boolean } \u8868\u793a\u53ef\u9009\u7684 trim \u4fee\u9970\u7b26\uff09\nconst model = defineModel<string, { trim?: boolean }>()\n<\/script><\/pre>\n
    \u6b65\u9aa4 2\uff1a\u6839\u636e\u4fee\u9970\u7b26\u5904\u7406\u503c<\/h3>\n
    \u5b50\u7ec4\u4ef6\u5185\u90e8\u62ff\u5230 model.modifiers<\/code>\uff08\u4fee\u9970\u7b26\u5bf9\u8c61\uff09\uff0c\u6839\u636e\u662f\u5426\u5f00\u542f\u4fee\u9970\u7b26\uff0c\u8c03\u6574\u6700\u7ec8\u4f20\u7ed9\u7236\u7ec4\u4ef6\u7684\u503c\u3002  <\/p>\n
    \u5b8c\u6574\u793a\u4f8b\uff1a  <\/p>\n
    <script setup lang="ts">\nconst model = defineModel<string, { trim?: boolean }>()\nfunction handleInput(e: Event) {\n  const inputValue = (e.target as HTMLInputElement).value\n  \/\/ \u6839\u636e\u4fee\u9970\u7b26 trim \u51b3\u5b9a\u662f\u5426\u5904\u7406\u503c\n  const finalValue = model.modifiers.trim ? inputValue.trim() : inputValue\n  model.value = finalValue \/\/ \u8d4b\u503c\u7ed9 model.value\uff0c\u81ea\u52a8\u89e6\u53d1 emit\n}\n<\/script>\n<template>\n  <input :value="model.value" @input="handleInput" \/>\n<\/template><\/pre>\n
    \u7236\u7ec4\u4ef6\u4f7f\u7528\u65f6\uff0cv-model.trim<\/code> \u4f1a\u81ea\u52a8\u89e6\u53d1\u5b50\u7ec4\u4ef6\u7684\u4fee\u9970\u7b26\u903b\u8f91\uff1a  <\/p>\n
    <template>\n  <CustomInput v-model.trim="username" \/>\n<\/template>\n<script setup lang="ts">\nimport { ref } from 'vue'\nconst username = ref(' \u521d\u59cb\u503c ') \/\/ \u5b50\u7ec4\u4ef6 trim \u540e\u4f1a\u53d8\u6210 '\u521d\u59cb\u503c'\n<\/script><\/pre>\n
    \u548c\u4f20\u7edf props + emit \u6bd4\uff0cdefineModel \u7c7b\u578b\u4f18\u52bf\u5728\u54ea\uff1f<\/h2>\n
    \u8fc7\u53bb\u5199\u53cc\u5411\u7ed1\u5b9a\uff0cprops<\/code> \u548c emit<\/code> \u7684\u7c7b\u578b\u5f97\u5206\u5f00\u58f0\u660e<\/strong>\uff0c\u5bb9\u6613\u51fa\u73b0\u201c\u4f20\u503c\u7c7b\u578b\u201d\u548c\u201c\u89e6\u53d1\u66f4\u65b0\u7684 payload \u7c7b\u578b\u201d\u4e0d\u4e00\u81f4\u7684\u95ee\u9898\u3002  <\/p>\n
    \u6bd4\u5982\u65e7\u5199\u6cd5\u7684\u6f5c\u5728\u98ce\u9669\uff1a  <\/p>\n
    <script setup lang="ts">\ndefineProps<{ modelValue: string }>() \/\/ props \u662f string\nconst emit = defineEmits<{ (e: 'update:modelValue', val: number): void }>() \/\/ emit  payload \u662f number\nfunction onInput() {\n  emit('update:modelValue', 123) \/\/ \u8fd9\u91cc TS \u4e0d\u4f1a\u62a5\u9519\uff0c\u4f46\u7236\u7ec4\u4ef6\u63a5\u6536 string\uff0c\u8fd0\u884c\u65f6\u4f1a\u51fa\u9519\uff01\n}\n<\/script><\/pre>\n
    \u800c defineModel<\/code> \u628a props<\/code> \u548c emit<\/code> \u7684\u7c7b\u578b\u7ed1\u5b9a\u5728\u4e00\u8d77<\/strong>\uff1a  <\/p>\n
    <script setup lang="ts">\nconst model = defineModel<string>() \n\/\/ \u7b49\u4ef7\u4e8e\uff1a\n\/\/ props: { modelValue: string }\n\/\/ emit: (e: 'update:modelValue', val: string) => void \nfunction onInput() {\n  model.value = 123 \/\/ TS \u76f4\u63a5\u62a5\u9519\uff1a\u4e0d\u80fd\u628a number \u8d4b\u7ed9 string \u7c7b\u578b\n}\n<\/script><\/pre>\n
    \u53ef\u89c1 defineModel<\/code> \u8ba9\u7c7b\u578b\u7ea6\u675f\u66f4\u201c\u4e25\u683c\u4e14\u81ea\u52a8\u201d\uff0c\u51cf\u5c11\u624b\u52a8\u7ef4\u62a4\u4e24\u5957\u7c7b\u578b\u7684\u6210\u672c\uff0c\u4ece\u6839\u6e90\u4e0a\u907f\u514d\u7c7b\u578b\u4e0d\u5339\u914d\u7684 bug\u3002  <\/p>\n
    \u590d\u6742\u7c7b\u578b\uff08\u5bf9\u8c61\u3001\u6570\u7ec4\uff09\u600e\u4e48\u7528 defineModel\uff1f<\/h2>\n
    \u5b9e\u9645\u9879\u76ee\u4e2d\uff0cv-model<\/code> \u7ed1\u5b9a\u7684\u53ef\u80fd\u662f\u5bf9\u8c61\uff08\u6bd4\u5982\u7528\u6237\u4fe1\u606f\uff09\u3001\u6570\u7ec4\uff08\u6bd4\u5982\u9009\u4e2d\u7684\u5217\u8868\uff09\uff0c\u8fd9\u65f6\u5019\u8981\u7528\u63a5\u53e3\u6216\u7c7b\u578b\u522b\u540d\u5148\u5b9a\u4e49\u7ed3\u6784<\/strong>\uff0c\u518d\u4f20\u7ed9 defineModel<\/code>\u3002  <\/p>\n
    \u793a\u4f8b\uff1a\u7ed1\u5b9a\u7528\u6237\u5bf9\u8c61<\/h3>\n
    <script setup lang="ts">\n\/\/ \u7b2c\u4e00\u6b65\uff1a\u5b9a\u4e49\u7528\u6237\u7ed3\u6784\ninterface User {\n  name: string;\n  age: number;\n  email?: string; \/\/ \u53ef\u9009\u5c5e\u6027\n}\n\/\/ \u7b2c\u4e8c\u6b65\uff1a\u7528\u63a5\u53e3\u4f5c\u4e3a\u6cdb\u578b\u53c2\u6570\nconst userModel = defineModel<User>()\n\/\/ \u5b50\u7ec4\u4ef6\u5185\u90e8\u4fee\u6539\u65f6\uff0c\u5fc5\u987b\u7b26\u5408 User \u7ed3\u6784\nfunction updateUser() {\n  userModel.value = { name: '\u65b0\u540d\u5b57', age: 25 } \/\/ \u5408\u6cd5\uff0cemail \u53ef\u9009\n  \/\/ userModel.value = { name: '\u9519', age: '25' } \/\/ TS \u62a5\u9519\uff1aage \u5fc5\u987b\u662f number\n}\n<\/script><\/pre>\n
    \u7236\u7ec4\u4ef6\u7ed1\u5b9a\u503c\u65f6\uff0c\u7c7b\u578b\u4e5f\u4f1a\u88ab\u4e25\u683c\u9650\u5236\uff1a  <\/p>\n
    <template>\n  <UserEditor v-model="currentUser" \/>\n<\/template>\n<script setup lang="ts">\nimport { ref } from 'vue'\n\/\/ currentUser \u5fc5\u987b\u662f User \u7c7b\u578b\nconst currentUser = ref<User>({ name: '\u521d\u59cb\u540d', age: 20 })\n<\/script><\/pre>\n
    defineModel \u7684\u9ed8\u8ba4\u503c\u600e\u4e48\u548c\u7c7b\u578b\u7ed3\u5408\uff1f<\/h2>\n
    defineModel<\/code> \u652f\u6301\u901a\u8fc7\u9009\u9879\u5bf9\u8c61<\/strong>\u8bbe\u7f6e\u9ed8\u8ba4\u503c\uff0c\u4e14\u9ed8\u8ba4\u503c\u7684\u7c7b\u578b\u5fc5\u987b\u548c\u58f0\u660e\u7684\u7c7b\u578b\u4e00\u81f4\u3002  <\/p>\n
    \u793a\u4f8b\uff1a\u5e26\u9ed8\u8ba4\u503c\u7684 string \u7c7b\u578b model<\/h3>\n
    <script setup lang="ts">\n\/\/ \u6cdb\u578b\u58f0\u660e\u7c7b\u578b\u4e3a string\uff0c\u9ed8\u8ba4\u503c\u4e5f\u5fc5\u987b\u662f string\nconst model = defineModel<string>({ default: '\u9ed8\u8ba4\u6587\u672c' })\n\/\/ \u9519\u8bef\u793a\u4f8b\uff1a\u9ed8\u8ba4\u503c\u7c7b\u578b\u4e0d\u5339\u914d\n\/\/ const model = defineModel<number>({ default: 'abc' }) \/\/ TS \u62a5\u9519\uff1astring \u4e0d\u80fd\u8d4b\u7ed9 number\n<\/script><\/pre>\n
    \u8fd9\u6837\u8bbe\u7f6e\u540e\uff0c\u7236\u7ec4\u4ef6\u6ca1\u4f20 v-model<\/code> \u503c\u65f6\uff0c\u5b50\u7ec4\u4ef6\u4f1a\u7528 '\u9ed8\u8ba4\u6587\u672c'<\/code>\uff0c\u540c\u65f6\u7c7b\u578b\u4f9d\u7136\u662f string<\/code>\uff0c\u4fdd\u8bc1\u6574\u4e2a\u6d41\u7a0b\u7684\u7c7b\u578b\u5b89\u5168\u3002  <\/p>\n
    \u7c7b\u578b\u62a5\u9519\u4e86\u548b\u6392\u67e5\uff1f<\/h2>\n
    \u9047\u5230 defineModel<\/code> \u7c7b\u578b\u62a5\u9519\uff0c\u6838\u5fc3\u601d\u8def\u662f\u4ece\u201c\u5b50\u7ec4\u4ef6\u58f0\u660e\u201d\u548c\u201c\u7236\u7ec4\u4ef6\u4f7f\u7528\u201d\u4e24\u7aef\u68c0\u67e5<\/strong>\uff1a  <\/p>\n
    \u60c5\u51b5 1\uff1a\u5b50\u7ec4\u4ef6\u5185\u90e8\u8d4b\u503c\u7c7b\u578b\u4e0d\u5bf9<\/h3>\n
    defineModel<number>()<\/code>\uff0c\u4f46\u4ee3\u7801\u91cc\u5199\u4e86 model.value = 'abc'<\/code>\uff0c\u8fd9\u65f6 TS \u4f1a\u76f4\u63a5\u5728\u8d4b\u503c\u5904\u62a5\u9519\uff0c\u63d0\u793a\u201c\u4e0d\u80fd\u5c06 string \u8d4b\u7ed9 number \u7c7b\u578b\u201d\u3002  <\/p>\n
    \u60c5\u51b5 2\uff1a\u7236\u7ec4\u4ef6\u7ed1\u5b9a\u503c\u7c7b\u578b\u4e0d\u5339\u914d<\/h3>\n
    \u5b50\u7ec4\u4ef6 defineModel<string>()<\/code>\uff0c\u7236\u7ec4\u4ef6\u7528 const parentValue = ref(123)<\/code> \u7ed1\u5b9a\uff0c\u8fd9\u65f6 TS \u4f1a\u5728\u7236\u7ec4\u4ef6\u7684 v-model<\/code> \u5904\u62a5\u9519\uff0c\u63d0\u793a\u201cnumber \u7c7b\u578b\u4e0d\u80fd\u8d4b\u503c\u7ed9 string \u7c7b\u578b\u201d\u3002  <\/p>\n
    \u60c5\u51b5 3\uff1a\u4fee\u9970\u7b26\u6216\u591a model \u540d\u79f0\u5199\u9519<\/h3>\n
    \u6bd4\u5982\u5b50\u7ec4\u4ef6\u58f0\u660e\u4fee\u9970\u7b26 { trim?: boolean }<\/code>\uff0c\u4f46\u7236\u7ec4\u4ef6\u5199\u6210 v-model.trimx<\/code>\uff08\u591a\u4e86\u4e2a x\uff09\uff0cTS \u4f1a\u63d0\u793a\u201c\u4e0d\u5b58\u5728\u7684\u4fee\u9970\u7b26\u201d\uff0c\u5e2e\u4f60\u53ca\u65f6\u53d1\u73b0\u62fc\u5199\u9519\u8bef\u3002  <\/p>\n
    defineModel \u7c7b\u578b\u5904\u7406\u7684\u6838\u5fc3\u903b\u8f91<\/h2>\n
    defineModel<\/code> \u7684\u7c7b\u578b\u8bbe\u8ba1\uff0c\u672c\u8d28\u662f\u8ba9\u53cc\u5411\u7ed1\u5b9a\u7684\u201c\u4f20\u503c\u201d\u548c\u201c\u66f4\u65b0\u201d\u5728\u7c7b\u578b\u4e0a\u5f3a\u5173\u8054<\/strong>\uff1a  <\/p>\n
      \n
    • \u5355\u4e00 v-model<\/code>\uff1a\u7528\u6cdb\u578b <T><\/code> \u76f4\u63a5\u6307\u5b9a modelValue<\/code> \u7684\u7c7b\u578b\u3002  <\/li>\n
    • \u591a\u4e2a v-model<\/code>\uff1a\u7528\u6cdb\u578b\u5bf9\u8c61 { [name]: T }<\/code> \u5206\u522b\u6307\u5b9a\u6bcf\u4e2a model \u7684\u7c7b\u578b\u3002  <\/li>\n
    • \u5e26\u4fee\u9970\u7b26\uff1a\u7528\u7b2c\u4e8c\u4e2a\u6cdb\u578b <T, Modifiers><\/code> \u58f0\u660e\u4fee\u9970\u7b26\u7ed3\u6784\uff0c\u518d\u7ed3\u5408\u903b\u8f91\u5904\u7406\u503c\u3002  <\/li>\n
    • \u590d\u6742\u7c7b\u578b\uff1a\u5148\u5b9a\u4e49\u63a5\u53e3\/\u7c7b\u578b\u522b\u540d\uff0c\u518d\u4f5c\u4e3a\u6cdb\u578b\u53c2\u6570\uff0c\u4fdd\u8bc1\u7ed3\u6784\u4e00\u81f4\u6027\u3002  <\/li>\n<\/ul>\n
      \u6bd4\u8d77\u4f20\u7edf props + emit<\/code>\uff0cdefineModel<\/code> \u628a\u7c7b\u578b\u7ea6\u675f\u505a\u201c\u900f\u201d\u4e86\u2014\u2014\u4e00\u6b21\u58f0\u660e\uff0c\u4e24\u7aef\uff08\u5b50\u3001\u7236\u7ec4\u4ef6\uff09\u53d7\u76ca<\/strong>\uff0c\u65e2\u51cf\u5c11\u4ee3\u7801\u91cf\uff0c\u53c8\u4ece\u7f16\u8bd1\u9636\u6bb5\u62e6\u622a\u7c7b\u578b\u9519\u8bef\uff0c\u8ba9\u7ec4\u4ef6\u66f4\u5065\u58ee\u3002  <\/p>\n
      \u5b9e\u9645\u9879\u76ee\u91cc\uff0c\u5efa\u8bae\u4f18\u5148\u7528 TS + \u6cdb\u578b\u7684\u65b9\u5f0f\u5199 defineModel<\/code>\uff0c\u914d\u5408\u63a5\u53e3\u5b9a\u4e49\u590d\u6742\u7ed3\u6784\uff0c\u56e2\u961f\u534f\u4f5c\u65f6\u80fd\u51cf\u5c11\u5f88\u591a\u201c\u4f20\u9519\u503c\u3001\u6539\u6f0f\u7c7b\u578b\u201d\u7684\u6c9f\u901a\u6210\u672c~  <\/p>\n
      \uff08\u5982\u679c\u662f\u7ef4\u62a4\u8001\u9879\u76ee\u6216 JS \u9879\u76ee\uff0c\u7528\u9009\u9879\u5bf9\u8c61\u7684 type<\/code> \u4e5f\u80fd\u52c9\u5f3a\u515c\u5e95\uff0c\u4f46 TS \u9879\u76ee\u4e00\u5b9a\u8981\u62e5\u62b1\u6cdb\u578b\uff01\uff09<\/p>","pubDate":"Tue, 31 Mar 2026 20:02:28 +0800"},{"title":"Vue3 defineModel \u7684 get \u548c set \u600e\u4e48\u7528\uff1f\u53cc\u5411\u7ed1\u5b9a\u903b\u8f91\u8fd8\u80fd\u8fd9\u4e48\u73a9\uff1f","link":"https:\/\/codeqd.com\/post\/20260321721.html","description":"
      defineModel \u662f\u5e72\u5565\u7684\uff1f\u548c\u4f20\u7edf v-model \u5199\u6cd5\u6709\u5565\u4e0d\u540c\uff1f<\/h2>\n
      Vue \u91cc\u7ec4\u4ef6\u95f4\u5b9e\u73b0\u53cc\u5411\u7ed1\u5b9a\uff0c\u4ee5\u524d\u5f97\u9760 props<\/code> \u63a5\u6536\u7236\u7ec4\u4ef6\u7684\u503c\uff0c\u518d\u7528 emit('update:xxx')<\/code> \u901a\u77e5\u7236\u7ec4\u4ef6\u66f4\u65b0\uff0cVue 3.4 \u4e4b\u540e\u63a8\u51fa defineModel<\/code> \u8bed\u6cd5\u7cd6\uff0c\u628a\u8fd9\u5957\u6d41\u7a0b\u7b80\u5316\u4e86 \u2014\u2014 \u4f60\u53ea\u9700\u8981\u5728\u5b50\u7ec4\u4ef6\u91cc\u5199 const model = defineModel()<\/code>\uff0c\u5b83\u81ea\u52a8\u5e2e\u4f60\u5904\u7406 props<\/code> \u63a5\u6536\uff08\u5bf9\u5e94\u7236\u7ec4\u4ef6 v-model<\/code> \u7ed1\u5b9a\u7684\u5b57\u6bb5\uff09\u548c emit<\/code> \u89e6\u53d1\u66f4\u65b0\uff0c\u4e0d\u7528\u624b\u52a8\u5199 props<\/code> \u58f0\u660e\u548c emit<\/code> \u8c03\u7528\uff0c\u4ee3\u7801\u91cf\u76f4\u63a5\u51cf\u534a\u3002  <\/p>\n
      \u4f20\u7edf\u5199\u6cd5\u5f97\u8fd9\u4e48\u5199\uff1a  <\/p>\n
      <!-- \u5b50\u7ec4\u4ef6\u4f20\u7edf\u53cc\u5411\u7ed1\u5b9a -->\n<script setup>\nconst props = defineProps(['modelValue'])\nconst emit = defineEmits(['update:modelValue'])\n\/\/ \u4fee\u6539\u503c\u65f6\u8981\u624b\u52a8 emit\nconst handleChange = (val) => {\n  emit('update:modelValue', val)\n}\n<\/script><\/pre>\n
      \u7528 defineModel<\/code> \u540e\u76f4\u63a5\u7b80\u5316\u6210\uff1a  <\/p>\n
      <!-- \u5b50\u7ec4\u4ef6\u7528 defineModel -->\n<script setup>\nconst model = defineModel()\n\/\/ \u76f4\u63a5\u4fee\u6539 model \u5c31\u4f1a\u89e6\u53d1\u7236\u7ec4\u4ef6\u66f4\u65b0\nconst handleChange = () => {\n  model.value = '\u65b0\u503c'\n}\n<\/script><\/pre>\n
      \u80fd\u770b\u51fa\u6765\uff0cdefineModel<\/code> \u628a\u300c\u58f0\u660e props + \u58f0\u660e emit + \u624b\u52a8\u89e6\u53d1 emit\u300d\u7684\u91cd\u590d\u5de5\u4f5c\u5168\u81ea\u52a8\u5316\u4e86\uff0c\u5199\u7ec4\u4ef6\u65f6\u66f4\u4e13\u6ce8\u903b\u8f91\u672c\u8eab\u3002  <\/p>\n
      defineModel \u91cc\u7684 get\u3001set \u600e\u4e48\u7406\u89e3\uff1f\u80fd\u89e3\u51b3\u5565\u95ee\u9898\uff1f<\/h2>\n
      defineModel<\/code> \u652f\u6301\u4f20\u5165\u4e00\u4e2a\u914d\u7f6e\u5bf9\u8c61\uff0c\u91cc\u9762\u53ef\u4ee5\u5199 get<\/code> \u548c set<\/code> \u51fd\u6570\uff0c\u7528\u6765\u62e6\u622a\u300c\u7236\u7ec4\u4ef6\u503c\u7684\u8bfb\u53d6\u300d\u548c\u300c\u5b50\u7ec4\u4ef6\u53d1\u8d77\u7684\u66f4\u65b0\u300d<\/strong>\uff0c\u7b80\u5355\u8bf4\uff1a  <\/p>\n
        \n
      • get<\/code>\uff1a\u5f53\u5b50\u7ec4\u4ef6\u8981\u8bfb\u53d6\u7236\u7ec4\u4ef6\u901a\u8fc7 v-model<\/code> \u4f20\u8fc7\u6765\u7684\u503c\u65f6\uff0c\u4f1a\u5148\u7ecf\u8fc7 get<\/code> \u5904\u7406\uff0c\u6bd4\u5982\u7236\u7ec4\u4ef6\u4f20\u7684\u662f\u7eaf\u6570\u5b57\uff0c\u5b50\u7ec4\u4ef6\u60f3\u663e\u793a\u5e26\u5355\u4f4d\u7684\u683c\u5f0f\uff0cget<\/code> \u91cc\u53ef\u4ee5\u8fd4\u56de\u683c\u5f0f\u5316\u540e\u7684\u503c\u3002  <\/li>\n
      • set<\/code>\uff1a\u5f53\u5b50\u7ec4\u4ef6\u4fee\u6539 defineModel<\/code> \u62ff\u5230\u7684\u53d8\u91cf\uff08model.value = \u65b0\u503c<\/code>\uff09\u65f6\uff0c\u8fd9\u4e2a\u65b0\u503c\u4f1a\u5148\u7ecf\u8fc7 set<\/code> \u5904\u7406\uff0c\u518d\u89e6\u53d1\u7236\u7ec4\u4ef6\u66f4\u65b0\uff0c\u6bd4\u5982\u5b50\u7ec4\u4ef6\u8f93\u5165\u7684\u662f\u5e26\u683c\u5f0f\u7684\u5b57\u7b26\u4e32\uff0cset<\/code> \u91cc\u53ef\u4ee5\u89e3\u6790\u6210\u7eaf\u6570\u5b57\u4f20\u7ed9\u7236\u7ec4\u4ef6\u3002  <\/li>\n<\/ul>\n
        \u4e3e\u4e2a\u5b9e\u9645\u4f8b\u5b50\uff1a\u7236\u7ec4\u4ef6\u7528 v-model<\/code> \u7ed1\u5b9a\u624b\u673a\u53f7\uff0c\u5b50\u7ec4\u4ef6\u662f\u8f93\u5165\u6846\uff0c\u8981\u5728\u8f93\u5165\u65f6\u81ea\u52a8\u52a0\u7a7a\u683c\u5206\u9694\uff08138 1234 5678<\/code>\uff09\uff0c\u4f46\u7236\u7ec4\u4ef6\u9700\u8981\u7eaf\u6570\u5b57\uff0813812345678<\/code>\uff09\uff0c\u8fd9\u65f6\u5019 get<\/code> \u548c set<\/code> \u5c31\u6d3e\u4e0a\u7528\u573a\u4e86\uff1a  <\/p>\n
        <!-- \u5b50\u7ec4\u4ef6\uff1a\u624b\u673a\u53f7\u8f93\u5165\u6846 -->\n<script setup>\nconst model = defineModel({\n  get(value) {\n    \/\/ \u7236\u7ec4\u4ef6\u4f20\u7684 value \u662f\u7eaf\u6570\u5b57\uff0c\u8fd9\u91cc\u683c\u5f0f\u5316\u663e\u793a\n    if (!value) return ''\n    return value.toString().replace(\/(\\d{3})(?=\\d{4})\/g, '$1 ')\n  },\n  set(formattedValue) {\n    \/\/ \u5b50\u7ec4\u4ef6\u8f93\u5165\u7684\u662f\u5e26\u7a7a\u683c\u7684\u5b57\u7b26\u4e32\uff0c\u89e3\u6790\u6210\u7eaf\u6570\u5b57\u7ed9\u7236\u7ec4\u4ef6\n    const pureNumber = formattedValue.replace(\/\\s\/g, '')\n    return pureNumber \/\/ \u8fd4\u56de\u7ed9\u7236\u7ec4\u4ef6\u7684\u65b0\u503c\n  }\n})\n<\/script>\n<template>\n  <input v-model="model" placeholder="\u8bf7\u8f93\u5165\u624b\u673a\u53f7" \/>\n<\/template><\/pre>\n
        \u7236\u7ec4\u4ef6\u91cc\u53ea\u7528\u6b63\u5e38\u7ed1\u5b9a v-model<\/code>\uff1a  <\/p>\n
        <template>\n  <PhoneInput v-model="phone" \/>\n  <p>\u7236\u7ec4\u4ef6\u62ff\u5230\u7684\u624b\u673a\u53f7\uff1a{{ phone }}<\/p>\n<\/template>\n<script setup>\nimport { ref } from 'vue'\nconst phone = ref('13812345678')\n<\/script><\/pre>\n
        \u8fd9\u6837\u7528\u6237\u5728\u5b50\u7ec4\u4ef6\u8f93\u5165\u65f6\u770b\u5230\u7684\u662f\u5e26\u7a7a\u683c\u7684\u683c\u5f0f\uff0c\u7236\u7ec4\u4ef6\u5b58\u7684\u59cb\u7ec8\u662f\u7eaf\u6570\u5b57 \u2014\u2014 \u683c\u5f0f\u5316\u903b\u8f91\u88ab\u5c01\u88c5\u5728\u5b50\u7ec4\u4ef6\u7684 get\/set<\/code> \u91cc\uff0c\u7236\u7ec4\u4ef6\u5b8c\u5168\u4e0d\u7528\u5173\u5fc3\u683c\u5f0f\u5904\u7406\uff0c\u4ee3\u7801\u89e3\u8026\u53c8\u5e72\u51c0\u3002  <\/p>\n
        \u7ed9 defineModel \u52a0 get\u3001set \u65f6\uff0c\u8981\u6ce8\u610f\u54ea\u4e9b\u903b\u8f91\u8fb9\u754c\uff1f<\/h2>\n
        \u867d\u7136 get\/set<\/code> \u80fd\u5c01\u88c5\u5f88\u591a\u903b\u8f91\uff0c\u4f46\u5199\u7684\u65f6\u5019\u5f97\u907f\u5f00\u8fd9\u4e9b\u300c\u96f7\u533a\u300d\uff0c\u5426\u5219\u5bb9\u6613\u51fa\u73b0\u53cc\u5411\u7ed1\u5b9a\u4e0d\u540c\u6b65\u3001\u6b7b\u5faa\u73af\u4e4b\u7c7b\u7684\u95ee\u9898\uff1a  <\/p>\n
        get<\/code> \u91cc\u522b\u505a\u300c\u526f\u4f5c\u7528\u64cd\u4f5c\u300d<\/h3>\n
        get<\/code> \u662f\u300c\u53d6\u503c\u65f6\u7684\u62e6\u622a\u300d\uff0c\u6bcf\u6b21\u5b50\u7ec4\u4ef6\u8bfb\u53d6 model.value<\/code> \u90fd\u4f1a\u89e6\u53d1 get<\/code>\uff0c\u5982\u679c\u5728 get<\/code> \u91cc\u53d1\u8bf7\u6c42\u3001\u4fee\u6539\u5176\u4ed6\u54cd\u5e94\u5f0f\u6570\u636e\uff0c\u53ef\u80fd\u5bfc\u81f4\u65e0\u9650\u5faa\u73af\u66f4\u65b0\uff08get<\/code> \u91cc\u6539\u4e86\u53e6\u4e00\u4e2a\u53d8\u91cf\uff0c\u89e6\u53d1\u89c6\u56fe\u66f4\u65b0\uff0c\u53c8\u89e6\u53d1 get<\/code>\uff09\u3002get<\/code> \u53ea\u7528\u6765\u505a\u300c\u503c\u7684\u683c\u5f0f\u5316\/\u8f6c\u6362\u300d\uff0c\u4fdd\u6301\u7eaf\u51fd\u6570\u6027\u8d28<\/strong>\uff08\u8f93\u5165\u503c \u2192 \u8f93\u51fa\u5904\u7406\u540e\u7684\u503c\uff0c\u6ca1\u6709\u989d\u5916\u64cd\u4f5c\uff09\u3002  <\/p>\n
        set<\/code> \u8981\u8003\u8651\u300c\u7236\u7ec4\u4ef6\u503c\u540c\u6b65\u300d\u7684\u65f6\u673a<\/h3>\n
        set<\/code> \u7684\u4f5c\u7528\u662f\u628a\u300c\u5b50\u7ec4\u4ef6\u60f3\u66f4\u65b0\u7684\u503c\u300d\u5904\u7406\u540e\u4f20\u7ed9\u7236\u7ec4\u4ef6\uff0c\u4f46\u5982\u679c set<\/code> \u91cc\u505a\u5f02\u6b65\u64cd\u4f5c\uff08\u6bd4\u5982\u8c03\u63a5\u53e3\u540e\u518d\u8fd4\u56de\u503c\uff09\uff0c\u4f1a\u5bfc\u81f4\u7236\u7ec4\u4ef6\u66f4\u65b0\u5ef6\u8fdf\uff0c\u5b50\u7ec4\u4ef6\u548c\u7236\u7ec4\u4ef6\u77ed\u6682\u4e0d\u540c\u6b65\uff0c\u5982\u679c\u5fc5\u987b\u5f02\u6b65\uff0c\u5f97\u624b\u52a8\u5904\u7406\u4e2d\u95f4\u72b6\u6001\uff08\u6bd4\u5982\u7528 ref<\/code> \u5b58\u4e34\u65f6\u503c\uff0c\u7b49\u5f02\u6b65\u5b8c\u6210\u518d\u66f4\u65b0 model.value<\/code>\uff09\u3002  <\/p>\n
        \u907f\u514d\u300c\u5faa\u73af\u66f4\u65b0\u300d<\/h3>\n
        set<\/code> \u91cc\u76f4\u63a5\u628a\u5904\u7406\u540e\u7684\u503c\u53c8\u8d4b\u503c\u7ed9 model.value<\/code>\uff0c\u4f1a\u89e6\u53d1\u7236\u7ec4\u4ef6\u66f4\u65b0 \u2192 \u7236\u7ec4\u4ef6\u66f4\u65b0\u540e\u5b50\u7ec4\u4ef6 model<\/code> \u53c8\u53d8\u5316 \u2192 \u518d\u89e6\u53d1 set<\/code> \u2026\u2026 \u65e0\u9650\u5faa\u73af\uff0c\u89e3\u51b3\u65b9\u6cd5\u662f\u5728 set<\/code> \u91cc\u5224\u65ad\u300c\u5904\u7406\u540e\u7684\u503c\u662f\u5426\u548c\u7236\u7ec4\u4ef6\u5f53\u524d\u503c\u771f\u7684\u4e0d\u540c\u300d\uff0c\u4e0d\u540c\u624d\u8fd4\u56de\u65b0\u503c<\/strong>\u3002  <\/p>\n
        const model = defineModel({\n  set(newVal) {\n    const processedVal = \u5904\u7406\u65b0\u503c(newVal)\n    \/\/ \u5bf9\u6bd4\u7236\u7ec4\u4ef6\u5f53\u524d\u503c\uff08\u6ce8\u610f\uff1aget \u5904\u7406\u524d\u7684\u539f\u59cb\u503c\uff09\n    if (processedVal !== \u7236\u7ec4\u4ef6\u539f\u59cb\u503c) { \n      return processedVal \n    }\n    return \/\/ \u503c\u6ca1\u53d8\u5316\uff0c\u4e0d\u89e6\u53d1\u66f4\u65b0\n  }\n})<\/pre>\n
        \uff08\u6ce8\uff1a\u7236\u7ec4\u4ef6\u539f\u59cb\u503c\u53ef\u4ee5\u901a\u8fc7 defineProps<\/code> \u5355\u72ec\u62ff\uff0c\u6216\u8005\u5728 set<\/code> \u91cc\u7528\u5176\u4ed6\u65b9\u5f0f\u7f13\u5b58\uff0c\u6839\u636e\u573a\u666f\u7075\u6d3b\u5904\u7406\u3002\uff09  <\/p>\n
        \u4e1a\u52a1\u91cc\u54ea\u4e9b\u573a\u666f\u9002\u5408\u7528 defineModel \u7684 get\/set\uff1f\u4e3e\u4e2a\u4f8b\u5b50\u6df1\u6316\u7ec6\u8282<\/h2>\n
        \u9664\u4e86\u521a\u624d\u7684\u624b\u673a\u53f7\u683c\u5f0f\u5316\uff0c\u8fd9\u4e9b\u573a\u666f\u4e5f\u7279\u522b\u9002\u5408\uff1a  <\/p>\n
        \u573a\u666f1\uff1a\u5bc6\u7801\u663e\u793a\/\u9690\u85cf\u7ec4\u4ef6<\/h3>\n
        \u7236\u7ec4\u4ef6\u7528 v-model<\/code> \u7ed1\u5b9a\u5bc6\u7801\u5b57\u7b26\u4e32\uff0c\u5b50\u7ec4\u4ef6\u91cc\u6709\u4e2a\u300c\u663e\u793a\u5bc6\u7801\u300d\u5f00\u5173\uff0c\u9700\u6c42\u662f\uff1a\u5f00\u5173\u6253\u5f00\u65f6\uff0c\u8f93\u5165\u6846\u663e\u793a\u660e\u6587\uff1b\u5f00\u5173\u5173\u95ed\u65f6\uff0c\u663e\u793a\u5bc6\u6587\uff08\uff09\uff0c\u4f46\u7236\u7ec4\u4ef6\u59cb\u7ec8\u8981\u62ff\u5230\u771f\u5b9e\u5bc6\u7801\u3002  <\/p>\n
        \u7528 get\/set<\/code> \u5b9e\u73b0\uff1a  <\/p>\n
        <!-- \u5b50\u7ec4\u4ef6\uff1aPasswordInput -->\n<script setup>\nimport { ref } from 'vue'\nconst show = ref(false) \/\/ \u63a7\u5236\u662f\u5426\u663e\u793a\u660e\u6587\nconst model = defineModel({\n  get(realPwd) {\n    \/\/ \u7236\u7ec4\u4ef6\u4f20\u7684 realPwd \u662f\u771f\u5b9e\u5bc6\u7801\uff0c\u6839\u636e show \u51b3\u5b9a\u663e\u793a\u5565\n    return show.value ? realPwd : '*'.repeat(realPwd.length)\n  },\n  set(displayedVal) {\n    \/\/ \u5b50\u7ec4\u4ef6\u8f93\u5165\u6846\u663e\u793a\u7684\u662f\u660e\u6587\u6216\u5bc6\u6587\uff0c\u8fd9\u91cc\u8981\u89e3\u6790\u6210\u771f\u5b9e\u5bc6\u7801\n    \/\/ \u6ce8\u610f\uff1a\u5982\u679c\u662f\u5bc6\u6587\u72b6\u6001\uff0c\u7528\u6237\u8f93\u5165\u65f6\u5176\u5b9e\u662f\u6539\u660e\u6587\uff0c\u6240\u4ee5\u8981\u533a\u5206\u573a\u666f\uff1f\n    \/\/ \u5b9e\u9645\u66f4\u4e25\u8c28\u7684\u505a\u6cd5\u662f\uff1a\u8f93\u5165\u65f6\u59cb\u7ec8\u64cd\u4f5c\u771f\u5b9e\u5bc6\u7801\uff0c\u663e\u793a\u7531 show \u63a7\u5236\n    \/\/ \u8fd9\u91cc\u7b80\u5316\u6f14\u793a\uff0c\u5047\u8bbe displayedVal \u662f\u7528\u6237\u8f93\u5165\u7684\u660e\u6587\uff08show \u4e3a true \u65f6\uff09\n    return displayedVal \n  }\n})\n<\/script>\n<template>\n  <input :type="show ? 'text' : 'password'" v-model="model" \/>\n  <button @click="show = !show">\n    {{ show ? '\u9690\u85cf\u5bc6\u7801' : '\u663e\u793a\u5bc6\u7801' }}\n  <\/button>\n<\/template><\/pre>\n
        \u7236\u7ec4\u4ef6\u7528\u8d77\u6765\u6beb\u65e0\u611f\u77e5\uff1a  <\/p>\n
        <template>\n  <PasswordInput v-model="pwd" \/>\n  <p>\u771f\u5b9e\u5bc6\u7801\uff1a{{ pwd }}<\/p>\n<\/template>\n<script setup>\nimport { ref } from 'vue'\nconst pwd = ref('')\n<\/script><\/pre>\n
        \u8fd9\u91cc get<\/code> \u8d1f\u8d23\u300c\u663e\u793a\u5c42\u7684\u8f6c\u6362\u300d\uff08\u660e\u6587\/\u5bc6\u6587\uff09\uff0cset<\/code> \u8d1f\u8d23\u300c\u628a\u7528\u6237\u8f93\u5165\u7684\u5185\u5bb9\u4f20\u56de\u7236\u7ec4\u4ef6\u300d\uff0c\u5b50\u7ec4\u4ef6\u5185\u90e8\u7684 show<\/code> \u72b6\u6001\u4e0d\u5f71\u54cd\u7236\u7ec4\u4ef6\u7684\u771f\u5b9e\u503c\uff0c\u903b\u8f91\u5f88\u5e72\u51c0\u3002  <\/p>\n
        \u573a\u666f2\uff1a\u81ea\u5b9a\u4e49\u4e0b\u62c9\u9009\u62e9\u5668\uff08\u503c\u8f6c\u6362\uff09<\/h3>\n
        \u5047\u8bbe\u4e1a\u52a1\u91cc\u4e0b\u62c9\u9009\u9879\u5b58\u7684\u662f value: number<\/code>\uff081=\u9009\u9879A\uff0c2=\u9009\u9879B\uff09\uff0c\u4f46\u7236\u7ec4\u4ef6 v-model<\/code> \u7ed1\u5b9a\u7684\u662f\u5b57\u7b26\u4e32\uff08'A'\/'B'\uff09\uff0c\u8fd9\u65f6\u5019\u5b50\u7ec4\u4ef6\u7528 get\/set<\/code> \u505a\u503c\u8f6c\u6362\uff1a  <\/p>\n
        <!-- \u5b50\u7ec4\u4ef6\uff1aCustomSelect -->\n<script setup>\nconst options = [\n  { label: '\u9009\u9879A', value: 1 },\n  { label: '\u9009\u9879B', value: 2 }\n]\nconst model = defineModel({\n  get(parentVal) {\n    \/\/ \u7236\u7ec4\u4ef6\u4f20\u7684\u662f\u5b57\u7b26\u4e32\uff08'A'\/'B'\uff09\uff0c\u8f6c\u6210\u5bf9\u5e94\u7684 number \u503c\n    return parentVal === 'A' ? 1 : 2\n  },\n  set(childVal) {\n    \/\/ \u5b50\u7ec4\u4ef6\u9009\u7684\u662f number\uff081\/2\uff09\uff0c\u8f6c\u6210\u5b57\u7b26\u4e32\u7ed9\u7236\u7ec4\u4ef6\n    return childVal === 1 ? 'A' : 'B'\n  }\n})\n<\/script>\n<template>\n  <select v-model="model">\n    <option v-for="opt in options" :value="opt.value">\n      {{ opt.label }}\n    <\/option>\n  <\/select>\n<\/template><\/pre>\n
        \u7236\u7ec4\u4ef6\u7ed1\u5b9a\u5b57\u7b26\u4e32\uff0c\u5b8c\u5168\u4e0d\u7528\u5173\u5fc3\u5b50\u7ec4\u4ef6\u7684\u6570\u503c\u903b\u8f91\uff1a  <\/p>\n
        <template>\n  <CustomSelect v-model="selected" \/>\n  <p>\u7236\u7ec4\u4ef6\u62ff\u5230\u7684\u9009\u62e9\uff1a{{ selected }}<\/p>\n<\/template>\n<script setup>\nimport { ref } from 'vue'\nconst selected = ref('A')\n<\/script><\/pre>\n
        \u8fd9\u79cd\u300c\u503c\u8f6c\u6362\u300d\u573a\u666f\u4e0b\uff0cget\/set<\/code> \u628a\u300c\u7236\u7ec4\u4ef6\u7684\u4e1a\u52a1\u503c\u300d\u548c\u300c\u5b50\u7ec4\u4ef6\u7684 UI \u6e32\u67d3\u503c\u300d\u89e3\u8026\uff0c\u53cc\u65b9\u90fd\u4e0d\u7528\u8fc1\u5c31\u5bf9\u65b9\u7684\u683c\u5f0f\uff0c\u7ef4\u62a4\u8d77\u6765\u66f4\u7075\u6d3b\u3002  <\/p>\n
        \u4e0d\u7528 defineModel \u7684 get\/set\uff0c\u81ea\u5df1\u5199 props+emit \u5904\u7406\u7c7b\u4f3c\u903b\u8f91\u6709\u591a\u9ebb\u70e6\uff1f<\/h2>\n
        \u5bf9\u6bd4\u4e00\u4e0b\u5c31\u77e5\u9053 defineModel<\/code> \u7701\u4e86\u591a\u5c11\u4e8b\u513f\uff0c\u8fd8\u662f\u62ff\u300c\u624b\u673a\u53f7\u683c\u5f0f\u5316\u300d\u7684\u4f8b\u5b50\uff0c\u7528\u4f20\u7edf props+emit<\/code> \u5b9e\u73b0\uff1a  <\/p>\n
        <!-- \u5b50\u7ec4\u4ef6\u4f20\u7edf\u5199\u6cd5 -->\n<script setup>\nconst props = defineProps(['modelValue'])\nconst emit = defineEmits(['update:modelValue'])\n\/\/ \u683c\u5f0f\u5316\u663e\u793a\u503c\uff08\u5bf9\u5e94 defineModel \u7684 get\uff09\nconst displayValue = computed(() => {\n  if (!props.modelValue) return ''\n  return props.modelValue.toString().replace(\/(\\d{3})(?=\\d{4})\/g, '$1 ')\n})\n\/\/ \u5904\u7406\u8f93\u5165\u4e8b\u4ef6\uff08\u5bf9\u5e94 defineModel \u7684 set\uff09\nconst handleInput = (e) => {\n  const inputVal = e.target.value\n  const pureNumber = inputVal.replace(\/\\s\/g, '')\n  emit('update:modelValue', pureNumber)\n}\n<\/script>\n<template>\n  <input :value="displayValue" @input="handleInput" placeholder="\u8bf7\u8f93\u5165\u624b\u673a\u53f7" \/>\n<\/template><\/pre>\n
        \u7236\u7ec4\u4ef6\u7528\u6cd5\u4e00\u6837\uff0c\u4f46\u5b50\u7ec4\u4ef6\u91cc\u8981\u505a\u8fd9\u4e9b\u4e8b\uff1a  <\/p>\n
          \n
        1. \u58f0\u660e props.modelValue<\/code> \u548c emit.update:modelValue<\/code>\uff1b  <\/li>\n
        2. \u7528 computed<\/code> \u505a\u300c\u663e\u793a\u503c\u300d\u7684\u8f6c\u6362\uff08\u5bf9\u5e94 get<\/code>\uff09\uff1b  <\/li>\n
        3. \u76d1\u542c\u8f93\u5165\u4e8b\u4ef6\uff0c\u624b\u52a8\u5904\u7406\u503c\u540e emit<\/code>\uff08\u5bf9\u5e94 set<\/code>\uff09\uff1b  <\/li>\n<\/ol>\n
          \u4ee3\u7801\u91cf\u6bd4\u7528 defineModel<\/code> \u591a\u4e86\u4e00\u500d\u4e0d\u6b62\uff0c\u800c\u4e14\u903b\u8f91\u5206\u6563\u5728 computed<\/code> \u548c\u4e8b\u4ef6\u5904\u7406\u91cc\uff0c\u5982\u679c\u518d\u52a0\u4e0a\u66f4\u590d\u6742\u7684\u903b\u8f91\uff08\u6bd4\u5982\u5f02\u6b65\u3001\u591a\u4e2a\u8f6c\u6362\u89c4\u5219\uff09\uff0c\u4ee3\u7801\u4f1a\u66f4\u81c3\u80bf\uff0c\u8fd8\u5bb9\u6613\u6f0f\u5199 emit<\/code> \u5bfc\u81f4\u53cc\u5411\u7ed1\u5b9a\u5931\u6548\u3002  <\/p>\n
          \u800c defineModel<\/code> + get\/set<\/code> \u628a\u300c\u503c\u7684\u8bfb\u53d6\u8f6c\u6362\u300d\u548c\u300c\u503c\u7684\u66f4\u65b0\u8f6c\u6362\u300d\u6536\u62e2\u5230\u4e00\u4e2a\u914d\u7f6e\u5bf9\u8c61\u91cc\uff0c\u903b\u8f91\u5185\u805a\u6027\u66f4\u5f3a\uff0c\u8bfb\u4ee3\u7801\u65f6\u4e00\u773c\u80fd\u770b\u5230\u53cc\u5411\u7ed1\u5b9a\u7684\u5904\u7406\u89c4\u5219\uff0c\u7ef4\u62a4\u6210\u672c\u76f4\u7ebf\u4e0b\u964d\u3002  <\/p>\n
          defineModel \u7684 get\/set \u80cc\u540e\u662f\u600e\u4e48\u548c\u7236\u7ec4\u4ef6 v-model \u8054\u52a8\u7684\uff1f<\/h2>\n
          \u5f97\u4ece Vue \u7684\u7f16\u8bd1\u548c\u54cd\u5e94\u5f0f\u539f\u7406\u8bf4\u8d77\uff1a  <\/p>\n
            \n
          1. \n
            \u7f16\u8bd1\u9636\u6bb5<\/strong>\uff1a\u5f53\u5b50\u7ec4\u4ef6\u7528 defineModel({ get, set })<\/code> \u65f6\uff0cVue \u4f1a\u628a\u5b83\u7f16\u8bd1\u6210\u300c\u5e26\u6709\u81ea\u5b9a\u4e49 getter\/setter \u7684\u54cd\u5e94\u5f0f\u5bf9\u8c61\u300d\uff0c\u8fd9\u4e2a\u5bf9\u8c61\u7684 value<\/code> \u8bfb\u53d6\u65f6\u89e6\u53d1 get<\/code>\uff0c\u8d4b\u503c\u65f6\u89e6\u53d1 set<\/code>\u3002  <\/p>\n<\/li>\n
          2. \n
            \u7236\u7ec4\u4ef6\u8054\u52a8<\/strong>\uff1a\u7236\u7ec4\u4ef6\u7528 v-model<\/code> \u7ed1\u5b9a\u7684\u5176\u5b9e\u662f\u4e00\u4e2a\u54cd\u5e94\u5f0f\u6570\u636e\uff08ref<\/code> \u6216 reactive<\/code> \u91cc\u7684\u5b57\u6bb5\uff09\uff0c\u5f53\u5b50\u7ec4\u4ef6\u8c03\u7528 model.value = \u65b0\u503c<\/code> \u65f6\uff0cset<\/code> \u5148\u5904\u7406\u65b0\u503c\uff0c\u7136\u540e\u5b50\u7ec4\u4ef6\u4f1a\u89e6\u53d1 emit('update:modelValue', \u5904\u7406\u540e\u7684\u503c)<\/code>\uff0c\u7236\u7ec4\u4ef6\u76d1\u542c\u5230\u8fd9\u4e2a emit<\/code> \u540e\uff0c\u4f1a\u66f4\u65b0\u81ea\u5df1\u7684\u54cd\u5e94\u5f0f\u6570\u636e\u3002  <\/p>\n<\/li>\n
          3. \n
            \u7236\u7ec4\u4ef6\u66f4\u65b0\u540e\u5b50\u7ec4\u4ef6\u540c\u6b65<\/strong>\uff1a\u7236\u7ec4\u4ef6\u6570\u636e\u66f4\u65b0\u540e\uff0c\u4f1a\u628a\u65b0\u503c\u4f20\u7ed9\u5b50\u7ec4\u4ef6\u7684 props.modelValue<\/code>\uff08\u8fd9\u4e00\u6b65\u662f\u81ea\u52a8\u7684\uff0c\u56e0\u4e3a v-model<\/code> \u672c\u8d28\u662f modelValue<\/code> + @update:modelValue<\/code>\uff09\uff0c\u5b50\u7ec4\u4ef6\u7684 defineModel<\/code> \u53d8\u91cf\u4f1a\u8bfb\u53d6\u8fd9\u4e2a\u65b0\u7684 props<\/code> \u503c\uff0c\u6b64\u65f6\u89e6\u53d1 get<\/code> \u5904\u7406\uff0c\u6240\u4ee5\u5b50\u7ec4\u4ef6\u7684\u663e\u793a\u5c42\u4e5f\u4f1a\u540c\u6b65\u66f4\u65b0\u3002  <\/p>\n<\/li>\n<\/ol>\n
            \u7b80\u5355\u8bf4\uff0cget<\/code> \u8d1f\u8d23\u300c\u7236 \u2192 \u5b50\u300d\u7684\u503c\u8f6c\u6362\uff0cset<\/code> \u8d1f\u8d23\u300c\u5b50 \u2192 \u7236\u300d\u7684\u503c\u8f6c\u6362\uff0cVue \u7f16\u8bd1\u65f6\u81ea\u52a8\u5e2e\u4f60\u628a\u8fd9\u4e24\u4e2a\u8fc7\u7a0b\u548c props<\/code>\u3001emit<\/code> \u5173\u8054\u8d77\u6765\uff0c\u4f60\u53ea\u9700\u8981\u5173\u6ce8\u8f6c\u6362\u903b\u8f91\u672c\u8eab\u3002  <\/p>\n
            \u7528 get\/set \u65f6\u9047\u5230\u53cc\u5411\u7ed1\u5b9a\u4e0d\u540c\u6b65\u3001\u6b7b\u5faa\u73af\u548b\u6392\u67e5\uff1f<\/h2>\n
            \u9047\u5230\u8fd9\u7c7b\u95ee\u9898\uff0c\u6309\u8fd9\u6b65\u6392\u67e5\uff1a  <\/p>\n
            \u7b2c\u4e00\u6b65\uff1a\u68c0\u67e5 set<\/code> \u91cc\u7684\u300c\u503c\u662f\u5426\u771f\u7684\u53d8\u5316\u300d<\/h3>\n
            set<\/code> \u5904\u7406\u540e\u7684\u503c\u548c\u7236\u7ec4\u4ef6\u5f53\u524d\u503c\u4e00\u6837\uff0c\u5374\u8fd8\u8fd4\u56de\u65b0\u503c\uff0c\u4f1a\u5bfc\u81f4\u7236\u7ec4\u4ef6\u91cd\u590d\u66f4\u65b0\uff0c\u751a\u81f3\u6b7b\u5faa\u73af\uff0c\u6240\u4ee5\u8981\u5728 set<\/code> \u91cc\u52a0\u5224\u65ad\uff1a  <\/p>\n
            const model = defineModel({\n  set(newVal) {\n    const processed = \u5904\u7406(newVal)\n    \/\/ \u5bf9\u6bd4\u7236\u7ec4\u4ef6\u539f\u59cb\u503c\uff08\u6ca1\u7ecf\u8fc7 get \u5904\u7406\u7684\uff09\n    if (processed !== props.modelValue) { \n      return processed \n    }\n    return \/\/ \u503c\u6ca1\u53d8\u5316\uff0c\u4e0d\u89e6\u53d1\u66f4\u65b0\n  }\n})<\/pre>\n
            \uff08\u6ce8\uff1a\u8fd9\u91cc\u8981\u62ff\u5230\u300c\u7236\u7ec4\u4ef6\u7684\u539f\u59cb\u503c\u300d\uff0c\u53ef\u4ee5\u7528 defineProps<\/code> \u5355\u72ec\u58f0\u660e modelValue<\/code>\uff0c\u8fd9\u6837\u80fd\u76f4\u63a5\u8bbf\u95ee props.modelValue<\/code>\u3002\uff09  <\/p>\n
            \u7b2c\u4e8c\u6b65\uff1a\u68c0\u67e5 get<\/code> \u662f\u5426\u5f15\u5165\u989d\u5916\u54cd\u5e94\u5f0f\u4f9d\u8d56<\/h3>\n
            get<\/code> \u91cc\u7528\u4e86\u5176\u4ed6\u54cd\u5e94\u5f0f\u6570\u636e\uff08\u6bd4\u5982\u5b50\u7ec4\u4ef6\u5185\u90e8\u7684 ref<\/code>\uff09\uff0c\u5f53\u8fd9\u4e9b\u6570\u636e\u53d8\u5316\u65f6\uff0c\u4f1a\u89e6\u53d1 get<\/code> \u91cd\u65b0\u6267\u884c\uff0c\u5bfc\u81f4 model.value<\/code> \u53d8\u5316\uff0c\u8fdb\u800c\u89e6\u53d1\u7236\u7ec4\u4ef6\u66f4\u65b0\uff0c\u5982\u679c\u903b\u8f91\u4e0d\u9700\u8981\u8fd9\u79cd\u8054\u52a8\uff0c\u8981\u907f\u514d\u5728 get<\/code> \u91cc\u4f9d\u8d56\u4e0d\u7a33\u5b9a\u7684\u54cd\u5e94\u5f0f\u6570\u636e\u3002  <\/p>\n
            \u6bd4\u5982\u5b50\u7ec4\u4ef6\u6709\u4e2a isEdit<\/code> \u7684 ref<\/code>\uff0cget<\/code> \u91cc\u6839\u636e isEdit<\/code> \u51b3\u5b9a\u8fd4\u56de\u503c\uff1a  <\/p>\n
            const isEdit = ref(false)\nconst model = defineModel({\n  get(val) {\n    return isEdit.value ? val : '\u4e0d\u53ef\u7f16\u8f91'\n  }\n})<\/pre>\n
            \u5f53 isEdit<\/code> \u4ece false<\/code> \u53d8 true<\/code> \u65f6\uff0cget<\/code> \u4f1a\u91cd\u65b0\u6267\u884c\uff0cmodel.value<\/code> \u4ece\u300c\u4e0d\u53ef\u7f16\u8f91\u300d\u53d8\u6210\u7236\u7ec4\u4ef6\u7684\u771f\u5b9e\u503c\uff0c\u8fd9\u4f1a\u89e6\u53d1\u7236\u7ec4\u4ef6\u66f4\u65b0\uff08\u56e0\u4e3a\u5b50\u7ec4\u4ef6 model.value<\/code> \u53d8\u5316\u4e86\uff1f\u4e0d\uff0c\u5176\u5b9e\u662f\u5b50\u7ec4\u4ef6\u5185\u90e8 model<\/code> \u7684\u503c\u53d8\u5316\uff0c\u89e6\u53d1 emit<\/code> \u5417\uff1f\u8fd9\u91cc\u5bb9\u6613\u6df7\u6dc6 \u2014\u2014 get<\/code> \u662f\u300c\u5b50\u7ec4\u4ef6\u8bfb\u53d6 model.value<\/code> \u65f6\u89e6\u53d1\u300d\uff0c\u5982\u679c\u5b50\u7ec4\u4ef6\u6a21\u677f\u91cc\u7528\u4e86 model.value<\/code>\uff08v-model<\/code> \u7ed1\u5b9a\uff09\uff0c\u5f53 isEdit<\/code> \u53d8\u5316\u65f6\uff0c\u6a21\u677f\u91cd\u65b0\u6e32\u67d3\u4f1a\u89e6\u53d1 get<\/code>\uff0c\u5bfc\u81f4 model.value<\/code> \u53d8\u5316\uff0c\u8fdb\u800c\u89e6\u53d1 emit<\/code> \u7ed9\u7236\u7ec4\u4ef6\uff0c\u9020\u6210\u4e0d\u5fc5\u8981\u7684\u66f4\u65b0\u3002  <\/p>\n
            \u6240\u4ee5get<\/code> \u91cc\u5c3d\u91cf\u53ea\u4f9d\u8d56\u7236\u7ec4\u4ef6\u4f20\u7684 value<\/code>\uff0c\u907f\u514d\u4f9d\u8d56\u5b50\u7ec4\u4ef6\u5185\u90e8\u7684\u54cd\u5e94\u5f0f\u6570\u636e<\/strong>\uff0c\u9664\u975e\u4f60\u786e\u5b9e\u9700\u8981\u8fd9\u79cd\u8054\u52a8\u903b\u8f91\u3002  <\/p>\n
            \u7b2c\u4e09\u6b65\uff1a\u68c0\u67e5\u5f02\u6b65\u64cd\u4f5c\u662f\u5426\u5904\u7406\u5f97\u5f53<\/h3>\n
            set<\/code> \u91cc\u6709\u5f02\u6b65\u64cd\u4f5c\uff08\u6bd4\u5982\u8c03\u63a5\u53e3\u9a8c\u8bc1\u503c\u662f\u5426\u5408\u6cd5\uff09\uff0c\u76f4\u63a5\u8fd4\u56de\u5f02\u6b65\u7ed3\u679c\u4f1a\u65e0\u6548\uff0c\u56e0\u4e3a set<\/code> \u8981\u540c\u6b65\u8fd4\u56de\u65b0\u503c\u7ed9\u7236\u7ec4\u4ef6\uff0c\u8fd9\u65f6\u5019\u5f97\u6362\u601d\u8def\uff1a  <\/p>\n
              \n
            • \u7528\u5b50\u7ec4\u4ef6\u5185\u90e8\u7684 ref<\/code> \u5b58\u4e34\u65f6\u503c\uff0c\u5f02\u6b65\u5b8c\u6210\u540e\u518d\u66f4\u65b0 model.value<\/code>\uff1b  <\/li>\n
            • \u6216\u8005\u5728\u7236\u7ec4\u4ef6\u91cc\u505a\u5f02\u6b65\u6821\u9a8c\uff0c\u5b50\u7ec4\u4ef6\u53ea\u8d1f\u8d23\u4f20\u9012\u539f\u59cb\u503c\u3002  <\/li>\n<\/ul>\n
              \u4e3e\u4e2a\u9519\u8bef\u793a\u4f8b\uff08set<\/code> \u7528\u5f02\u6b65\u5bfc\u81f4\u4e0d\u540c\u6b65\uff09\uff1a  <\/p>\n
              const model = defineModel({\n  set(newVal) {\n    \/\/ \u9519\u8bef\uff1aset \u4e0d\u80fd\u8fd4\u56de Promise\n    return new Promise((resolve) => {\n      setTimeout(() => {\n        resolve(newVal.trim()) \/\/ \u5f02\u6b65\u5904\u7406\u540e\u7684\u503c\n      }, 1000)\n    })\n  }\n})<\/pre>\n
              \u6b63\u786e\u505a\u6cd5\u662f\u5148\u540c\u6b65\u5904\u7406\uff0c\u5f02\u6b65\u903b\u8f91\u53e6\u505a\uff1a  <\/p>\n
              \nconst tempValue = ref('')\nconst model = defineModel({\n  get(val) {\n    return tempValue.value || val\n  },\n  set(newVal)<\/pre>","pubDate":"Tue, 31 Mar 2026 14:02:53 +0800"},{"title":"Vue3\u4e2ddefineModel\u600e\u4e48\u8bbe\u7f6e\u9ed8\u8ba4\u503c\uff1f\u5b9e\u9645\u573a\u666f\u91cc\u8981\u6ce8\u610f\u5565\uff1f","link":"https:\/\/codeqd.com\/post\/20260321720.html","description":"
              defineModel \u662f\u4ec0\u4e48\uff0c\u89e3\u51b3\u4e86\u5565\u95ee\u9898\uff1f<\/h2>\n
              \u8981\u641e\u61c2 defineModel<\/code> \u8bbe\u9ed8\u8ba4\u503c\u7684\u903b\u8f91\uff0c\u5f97\u5148\u660e\u767d\u5b83\u7684\u4f5c\u7528\uff0cVue 3.4 \u63a8\u51fa\u7684 defineModel<\/code> \u662f\u4e2a\u7f16\u8bd1\u5b8f\uff0c\u4e13\u95e8\u7b80\u5316\u7ec4\u4ef6\u53cc\u5411\u7ed1\u5b9a<\/strong>\u5f00\u53d1\uff0c\u4ee5\u524d\u505a\u5b50\u7ec4\u4ef6\u652f\u6301 v - model<\/code>\uff0c\u5f97\u624b\u52a8\u5199 props<\/code> \u63a5\u6536 modelValue<\/code>\uff0c\u518d\u7528 emit<\/code> \u53d1 update:modelValue<\/code> \u901a\u77e5\u7236\u7ec4\u4ef6\u66f4\u65b0\uff0c\u6b65\u9aa4\u7e41\u7410\u8fd8\u5bb9\u6613\u6f0f\uff0c\u73b0\u5728\u7528 defineModel<\/code> \u5c31\u7b80\u5355\u4e86\u2014\u2014\u5b50\u7ec4\u4ef6\u91cc\u4e00\u884c\u4ee3\u7801\u58f0\u660e\uff0c\u81ea\u52a8\u5904\u7406 props<\/code> \u548c emit<\/code>\uff0c\u8fd4\u56de\u7684\u8fd8\u662f\u54cd\u5e94\u5f0f ref<\/code>\uff0c\u4fee\u6539\u503c\u65f6\u80fd\u81ea\u52a8\u89e6\u53d1\u7236\u7ec4\u4ef6\u66f4\u65b0\uff0c\u5f00\u53d1\u6548\u7387\u76f4\u63a5\u63d0\u5347\u3002  <\/p>\n
              \u8bbe\u7f6e\u9ed8\u8ba4\u503c\u7684\u6838\u5fc3\u601d\u8def\u662f\u5565\uff1f<\/h2>\n
              \u7ed9 defineModel<\/code> \u52a0\u9ed8\u8ba4\u503c\uff0c\u8981\u7528\u5230\u5b83\u7684\u914d\u7f6e\u9879<\/strong>\u3002defineModel<\/code> \u7b2c\u4e00\u4e2a\u53c2\u6570\u662f\u7ed1\u5b9a\u7684\u201c\u6a21\u578b\u540d\u201d\uff08\u6bd4\u5982\u7236\u7ec4\u4ef6\u7528 v - model:xxx<\/code>\uff0c\u8fd9\u91cc\u5c31\u586b xxx<\/code>\uff09\uff0c\u7b2c\u4e8c\u4e2a\u53c2\u6570\u662f\u5bf9\u8c61\uff0c\u80fd\u914d\u7f6e default<\/code>\u3001required<\/code> \u7b49\u89c4\u5219\uff0c\u903b\u8f91\u548c defineProps<\/code> \u914d\u7f6e props<\/code> \u9ed8\u8ba4\u503c\u7c7b\u4f3c\u3002  <\/p>\n
              \u4e3e\u4e2a\u4f8b\u5b50\uff1a\u5b50\u7ec4\u4ef6\u60f3\u8ba9\u7ed1\u5b9a\u7684\u201c\u641c\u7d22\u5173\u952e\u8bcd\u201d\u9ed8\u8ba4\u663e\u793a\u201c\u8bf7\u8f93\u5165\u201d\uff0c\u4ee3\u7801\u53ef\u4ee5\u8fd9\u6837\u5199\uff1a  <\/p>\n
              <script setup>\n\/\/ \u58f0\u660e model\uff0c\u540d\u4e3a search\uff0c\u9ed8\u8ba4\u503c\u8bbe\u4e3a '\u8bf7\u8f93\u5165'\nconst search = defineModel('search', { \n  default: '\u8bf7\u8f93\u5165' \n})\n<\/script>\n<template>\n  <input :value="search" @input="search = $event.target.value" \/>\n<\/template><\/pre>\n
              \u7236\u7ec4\u4ef6\u4f7f\u7528\u65f6\uff0c\u82e5\u4e0d\u4f20\u503c\uff08\u5982 <SearchInput v - model:search \/><\/code>\uff09\uff0c\u5b50\u7ec4\u4ef6\u91cc\u7684 search<\/code> \u5c31\u7528 '\u8bf7\u8f93\u5165'<\/code> \u8fd9\u4e2a\u9ed8\u8ba4\u503c\uff1b\u82e5\u7236\u7ec4\u4ef6\u4f20\u4e86\u503c\uff08\u5982 <SearchInput v - model:search=\"parentValue\" \/><\/code>\uff09\uff0c\u5219\u4f18\u5148\u7528\u7236\u7ec4\u4ef6\u7ed9\u7684 parentValue<\/code>\u3002  <\/p>\n
              \u5b9e\u9645\u573a\u666f\u91cc\u8bbe\u7f6e\u9ed8\u8ba4\u503c\u5bb9\u6613\u8e29\u54ea\u4e9b\u5751\uff1f<\/h2>\n
              \u6b65\u9aa4\u770b\u7740\u7b80\u5355\uff0c\u5b9e\u9645\u5f00\u53d1\u7a0d\u4e0d\u7559\u610f\u5c31\u4f1a\u6389\u5751\uff0c\u8fd9\u51e0\u4e2a\u70b9\u5f97\u91cd\u70b9\u5173\u6ce8\uff1a  <\/p>\n
              \u54cd\u5e94\u5f0f\u4e0e\u5f15\u7528\u7c7b\u578b\u7684\u201c\u5171\u4eab\u95ee\u9898\u201d<\/h3>\n
              \u8981\u662f\u9ed8\u8ba4\u503c\u662f\u5bf9\u8c61\/\u6570\u7ec4<\/strong>\u8fd9\u7c7b\u5f15\u7528\u7c7b\u578b\uff0c\u76f4\u63a5\u5199 default: { name: '\u9ed8\u8ba4' }<\/code> \u6709\u98ce\u9669\u2014\u2014\u6240\u6709\u5b50\u7ec4\u4ef6\u5b9e\u4f8b\u4f1a\u5171\u4eab\u540c\u4e00\u4e2a\u5bf9\u8c61\u5f15\u7528\uff0c\u4e00\u4e2a\u7ec4\u4ef6\u6539\u4e86\u5c5e\u6027\uff0c\u5176\u4ed6\u7ec4\u4ef6\u4e5f\u4f1a\u8ddf\u7740\u53d8\uff08\u56e0\u4e3a\u5185\u5b58\u91cc\u662f\u540c\u4e00\u4e2a\u5bf9\u8c61\uff09\uff0c\u8fd9\u65f6\u5f97\u7528\u5de5\u5382\u51fd\u6570<\/strong>\u8fd4\u56de\u9ed8\u8ba4\u503c\uff0c\u4fdd\u8bc1\u6bcf\u4e2a\u5b9e\u4f8b\u90fd\u662f\u65b0\u5bf9\u8c61\uff1a  <\/p>\n
              const user = defineModel('user', { \n  default: () => ({ name: '\u533f\u540d', age: 18 }) \n})<\/pre>\n
              \u8fd9\u6837\u6bcf\u4e2a\u5b50\u7ec4\u4ef6\u7684 user<\/code> \u9ed8\u8ba4\u503c\u90fd\u662f\u72ec\u7acb\u65b0\u5bf9\u8c61\uff0c\u4e92\u4e0d\u5e72\u6270\u3002  <\/p>\n
              \u7236\u7ec4\u4ef6\u4f20\u503c\u7684\u201c\u4f18\u5148\u7ea7\u201d\u9677\u9631<\/h3>\n
              \u8981\u8bb0\u51c6\u89c4\u5219\uff1a\u7236\u7ec4\u4ef6\u4f20\u4e86\u503c\uff0c\u5b50\u7ec4\u4ef6\u9ed8\u8ba4\u503c\u5c31\u4e0d\u7528\uff1b\u7236\u7ec4\u4ef6\u6ca1\u4f20\uff08props<\/code> \u672a\u88ab\u63d0\u4f9b\uff09\uff0c\u624d\u7528\u9ed8\u8ba4\u503c<\/strong>\uff0c\u4f46\u8981\u662f\u7236\u7ec4\u4ef6\u4f20\u4e86 null<\/code> \u6216\u8005 undefined<\/code> \u5462\uff1f\u6bd4\u5982\u7236\u7ec4\u4ef6\u5199 <Child v - model:xxx=\"null\" \/><\/code>\uff0c\u8fd9\u65f6\u5b50\u7ec4\u4ef6\u4f1a\u4e0d\u4f1a\u7528\u9ed8\u8ba4\u503c\uff1f\u5b9e\u6d4b\u53d1\u73b0\uff0cVue \u4f1a\u628a null<\/code>\/undefined<\/code> \u5f53\u4f5c\u201c\u4f20\u4e86\u503c\u201d\uff0c\u9ed8\u8ba4\u503c\u4e0d\u4f1a\u751f\u6548\uff0c\u8981\u662f\u4e1a\u52a1\u91cc\u9700\u8981\u201c\u4f20 null<\/code> \u65f6\u7528\u9ed8\u8ba4\u503c\u201d\uff0c\u5f97\u5728\u5b50\u7ec4\u4ef6\u91cc\u624b\u52a8\u5224\u65ad\u5904\u7406\uff1a  <\/p>\n
              const xxx = defineModel('xxx', { default: '\u9ed8\u8ba4' })\n\/\/ \u624b\u52a8\u5904\u7406\uff1a\u82e5\u7236\u7ec4\u4ef6\u4f20\u4e86 null\/undefined\uff0c\u5f3a\u5236\u7528\u9ed8\u8ba4\u503c\nwatch(xxx, (newVal) => {\n  if (newVal == null) {\n    xxx.value = '\u9ed8\u8ba4'\n  }\n})<\/pre>\n
              v - model<\/code> \u4fee\u9970\u7b26\u7684\u201c\u7c7b\u578b\u51b2\u7a81\u201d<\/h3>\n
              \u7236\u7ec4\u4ef6\u7528 v - model<\/code> \u4fee\u9970\u7b26\u65f6\uff08.number<\/code> \u628a\u8f93\u5165\u8f6c\u6570\u5b57\uff0c.trim<\/code> \u53bb\u7a7a\u683c\uff09\uff0c\u5b50\u7ec4\u4ef6\u9ed8\u8ba4\u503c\u7684\u7c7b\u578b\u5f97\u548c\u4fee\u9970\u7b26\u903b\u8f91\u5339\u914d<\/strong>\uff0c\u6bd4\u5982\u7236\u7ec4\u4ef6\u7528 <Child v - model:age.number=\"parentAge\" \/><\/code>\uff0c\u5b50\u7ec4\u4ef6 age<\/code> \u7684\u9ed8\u8ba4\u503c\u5f97\u662f 0<\/code>\uff08\u6570\u5b57\uff09\uff0c\u522b\u8bbe\u6210\u5b57\u7b26\u4e32 '0'<\/code>\uff0c\u5426\u5219\u53ef\u80fd\u51fa\u73b0\u7c7b\u578b\u4e0d\u517c\u5bb9\u5f15\u53d1\u7684\u903b\u8f91\u9519\u8bef\u3002  <\/p>\n
              \u548c\u4f20\u7edf v - model \u5b9e\u73b0\u65b9\u5f0f\u5bf9\u6bd4\uff0c\u9ed8\u8ba4\u503c\u5904\u7406\u6709\u5565\u4e0d\u540c\uff1f<\/h2>\n
              \u4ee5\u524d\u5199\u53cc\u5411\u7ed1\u5b9a\uff0c\u5b50\u7ec4\u4ef6\u5f97\u624b\u52a8\u5199 props<\/code> \u548c emit<\/code>\uff1a  <\/p>\n
              <!-- \u4f20\u7edf\u5199\u6cd5\uff1a\u5b50\u7ec4\u4ef6 -->\n<script setup>\nconst props = defineProps({\n  modelValue: { \n    type: String, \n    default: '\u8bf7\u8f93\u5165' \n  }\n})\nconst emit = defineEmits(['update:modelValue'])\nconst handleInput = (e) => {\n  emit('update:modelValue', e.target.value)\n}\n<\/script>\n<template>\n  <input :value="modelValue" @input="handleInput" \/>\n<\/template><\/pre>\n
              \u73b0\u5728\u7528 defineModel<\/code>\uff0c\u4ee3\u7801\u91cf\u76f4\u63a5\u51cf\u534a\uff0c\u9ed8\u8ba4\u503c\u914d\u7f6e\u903b\u8f91\u548c defineProps<\/code> \u7c7b\u4f3c\uff0c\u4f46\u66f4\u7b80\u6d01\uff1a  <\/p>\n
              <!-- \u65b0\u5199\u6cd5\uff1a\u5b50\u7ec4\u4ef6 -->\n<script setup>\nconst model = defineModel('modelValue', { \n  default: '\u8bf7\u8f93\u5165' \n})\nconst handleInput = (e) => {\n  model.value = e.target.value \/\/ \u81ea\u52a8\u89e6\u53d1 emit\n}\n<\/script>\n<template>\n  <input :value="model" @input="handleInput" \/>\n<\/template><\/pre>\n
              \u6838\u5fc3\u5dee\u5f02\u662f\u54cd\u5e94\u5f0f\u5904\u7406\u66f4\u81ea\u52a8\u5316<\/strong>\uff1adefineModel<\/code> \u8fd4\u56de\u7684\u662f ref<\/code>\uff0c\u4fee\u6539 value<\/code> \u65f6\u81ea\u52a8\u53d1 emit<\/code>\uff1b\u4f20\u7edf\u5199\u6cd5\u5f97\u624b\u52a8\u8c03\u7528 emit<\/code>\uff0c\u800c\u4e14\u4ee3\u7801\u7ed3\u6784\u66f4\u7d27\u51d1\uff0c\u5c11\u4e86 props<\/code> \u548c emit<\/code> \u7684\u91cd\u590d\u58f0\u660e\uff0c\u964d\u4f4e\u4e86\u7406\u89e3\u6210\u672c\u3002  <\/p>\n
              \u4e3e\u4e2a\u5b8c\u6574\u6848\u4f8b\uff0c\u4ece\u7236\u5230\u5b50\u8bbe\u7f6e\u9ed8\u8ba4\u503c<\/h2>\n
              \u4ee5\u201c\u641c\u7d22\u7ec4\u4ef6\u201d\u573a\u666f\u4e3a\u4f8b\uff0c\u5b50\u7ec4\u4ef6 SearchInput<\/code> \u8981\u652f\u6301\u9ed8\u8ba4\u63d0\u793a\u6587\u5b57\uff0c\u7236\u7ec4\u4ef6\u53ef\u4f20\u53ef\u4e0d\u4f20\uff0c\u540c\u65f6\u8f93\u5165\u53d8\u5316\u8981\u540c\u6b65\u7ed9\u7236\u7ec4\u4ef6\u3002  <\/p>\n
              \u5b50\u7ec4\u4ef6 SearchInput.vue\uff1a<\/strong>  <\/p>\n
              <template>\n  <div class="search - wrap">\n    <input \n      class="search - input" \n      :value="searchValue" \n      @input="onInput" \n      placeholder="\uff08\u8fd9\u91cc\u7528\u9ed8\u8ba4\u503c\u515c\u5e95\uff09"\n    \/>\n    <button @click="clear">\u6e05\u7a7a<\/button>\n  <\/div>\n<\/template>\n<script setup>\nimport { ref } from 'vue'\n\/\/ \u58f0\u660e model\uff0c\u540d\u4e3a search\uff0c\u9ed8\u8ba4\u503c\u662f '\u8bf7\u8f93\u5165\u5173\u952e\u8bcd'\nconst searchValue = defineModel('search', { \n  default: '\u8bf7\u8f93\u5165\u5173\u952e\u8bcd' \n})\n\/\/ \u8f93\u5165\u65f6\u66f4\u65b0 model\nconst onInput = (e) => {\n  searchValue.value = e.target.value\n}\n\/\/ \u6e05\u7a7a\u903b\u8f91\uff1a\u76f4\u63a5\u6539 model \u7684\u503c\uff0c\u81ea\u52a8\u901a\u77e5\u7236\u7ec4\u4ef6\nconst clear = () => {\n  searchValue.value = ''\n}\n<\/script>\n<style scoped>\n.search - wrap { display: flex; }\n.search - input { flex: 1; }\n<\/style><\/pre>\n
              \u7236\u7ec4\u4ef6 Parent.vue\uff1a<\/strong>  <\/p>\n
              <template>\n  <div>\n    <!-- \u60c5\u51b51\uff1a\u7236\u7ec4\u4ef6\u4f20\u503c\uff0c\u5b50\u7ec4\u4ef6\u7528\u7236\u7ec4\u4ef6\u7684 value -->\n    <SearchInput v - model:search="parentSearch" \/>\n    <p>\u7236\u7ec4\u4ef6\u540c\u6b65\u7684\u503c\uff1a{{ parentSearch }}<\/p>\n    <!-- \u60c5\u51b52\uff1a\u7236\u7ec4\u4ef6\u4e0d\u4f20\u503c\uff0c\u5b50\u7ec4\u4ef6\u7528\u9ed8\u8ba4\u503c '\u8bf7\u8f93\u5165\u5173\u952e\u8bcd' -->\n    <SearchInput v - model:search \/>\n  <\/div>\n<\/template>\n<script setup>\nimport { ref } from 'vue'\nimport SearchInput from '.\/SearchInput.vue'\n\/\/ \u7236\u7ec4\u4ef6\u81ea\u5df1\u7684\u54cd\u5e94\u5f0f\u53d8\u91cf\nconst parentSearch = ref('')\n<\/script><\/pre>\n
              \u8fd0\u884c\u540e\u80fd\u770b\u5230\uff1a\u7b2c\u4e00\u4e2a SearchInput<\/code> \u7528\u7236\u7ec4\u4ef6\u7684 parentSearch<\/code>\uff08\u521d\u59cb\u7a7a\u5b57\u7b26\u4e32\uff09\uff0c\u7b2c\u4e8c\u4e2a\u56e0\u7236\u7ec4\u4ef6\u6ca1\u4f20\uff0c\u81ea\u52a8\u663e\u793a\u201c\u8bf7\u8f93\u5165\u5173\u952e\u8bcd\u201d\uff1b\u8f93\u5165\u6216\u70b9\u201c\u6e05\u7a7a\u201d\u65f6\uff0c\u5b50\u7ec4\u4ef6\u4fee\u6539 searchValue.value<\/code> \u4f1a\u81ea\u52a8\u540c\u6b65\u7ed9\u7236\u7ec4\u4ef6\uff0c\u53cc\u5411\u7ed1\u5b9a\u903b\u8f91\u5168\u7531 defineModel<\/code> \u63a5\u7ba1\uff0c\u4e0d\u7528\u624b\u52a8\u5199 emit<\/code>\uff0c\u5341\u5206\u4fbf\u6377\uff5e  <\/p>\n
              \u56e2\u961f\u534f\u4f5c\u65f6\u5173\u4e8e\u9ed8\u8ba4\u503c\u7684\u89c4\u8303\u5efa\u8bae<\/h2>\n
              \u591a\u4eba\u534f\u4f5c\u5f00\u53d1\u7ec4\u4ef6\uff0c\u9ed8\u8ba4\u503c\u5904\u7406\u4e0d\u7edf\u4e00\u6613\u7559\u9690\u60a3\uff0c\u8fd9\u51e0\u4e2a\u89c4\u8303\u80fd\u907f\u5751\uff1a  <\/p>\n
              \u7ec4\u4ef6\u6587\u6863\u5199\u6e05\u9ed8\u8ba4\u503c\u903b\u8f91<\/h3>\n
              \u5728\u7ec4\u4ef6\u7684\u6ce8\u91ca\/\u6587\u6863\u91cc\uff0c\u660e\u786e\u5199\u51fa defineModel<\/code> \u5bf9\u5e94\u7684\u201c\u6a21\u578b\u540d\u201d\u548c\u9ed8\u8ba4\u503c\u3002  <\/p>\n
              <!-- SearchInput.vue \u6587\u6863\u6ce8\u91ca -->\n\/**\n * \u641c\u7d22\u8f93\u5165\u6846\u7ec4\u4ef6\n * @model search - \u53cc\u5411\u7ed1\u5b9a\u7684\u641c\u7d22\u5173\u952e\u8bcd\n * @default search - \u672a\u4f20\u503c\u65f6\uff0c\u9ed8\u8ba4\u663e\u793a '\u8bf7\u8f93\u5165\u5173\u952e\u8bcd'\n * @example <SearchInput v - model:search="parentVal" \/> - \u7236\u7ec4\u4ef6\u4f20\u503c\n * @example <SearchInput v - model:search \/> - \u7528\u9ed8\u8ba4\u503c\n *\/<\/pre>\n
              \u5176\u4ed6\u4eba\u7528\u7ec4\u4ef6\u65f6\uff0c\u770b\u6587\u6863\u5c31\u77e5\u4e0d\u4f20\u503c\u7684\u884c\u4e3a\uff0c\u51cf\u5c11\u6c9f\u901a\u6210\u672c\u3002  <\/p>\n
              \u4e25\u683c\u4fdd\u6301\u7c7b\u578b\u4e00\u81f4\u6027<\/h3>\n
              \u9ed8\u8ba4\u503c\u7684\u7c7b\u578b\u8981\u548c\u7236\u7ec4\u4ef6\u9884\u671f\u7c7b\u578b\u4e00\u81f4\uff0c\u6bd4\u5982\u7236\u7ec4\u4ef6\u7528 v - model:age.number<\/code> \u671f\u671b\u4f20\u6570\u5b57\uff0c\u5b50\u7ec4\u4ef6 age<\/code> \u7684\u9ed8\u8ba4\u503c\u5c31\u5f97\u662f 0<\/code>\uff08\u6570\u5b57\u7c7b\u578b\uff09\uff0c\u522b\u5199\u6210 '0'<\/code>\uff08\u5b57\u7b26\u4e32\uff09\uff0c\u5426\u5219\u53ef\u80fd\u51fa\u73b0\u201c\u8f93\u5165\u6846\u8f93\u6570\u5b57\uff0c\u7236\u7ec4\u4ef6\u62ff\u5230\u5b57\u7b26\u4e32\u201d\u8fd9\u7c7b\u5947\u602a Bug\u3002  <\/p>\n
              \u590d\u6742\u9ed8\u8ba4\u503c\u7528\u5de5\u5382\u51fd\u6570<\/h3>\n
              \u82e5\u9ed8\u8ba4\u503c\u662f\u5bf9\u8c61\u3001\u6570\u7ec4\u8fd9\u7c7b\u5f15\u7528\u7c7b\u578b\uff0c\u5fc5\u987b\u7528\u5de5\u5382\u51fd\u6570\u8fd4\u56de\u9ed8\u8ba4\u503c\uff08\u5982\u524d\u9762\u8bb2\u7684 default: () => ({ ... })<\/code>\uff09\uff0c\u786e\u4fdd\u6bcf\u4e2a\u7ec4\u4ef6\u5b9e\u4f8b\u7684\u9ed8\u8ba4\u503c\u90fd\u662f\u72ec\u7acb\u5bf9\u8c61\uff0c\u907f\u514d\u201c\u4e00\u4e2a\u7ec4\u4ef6\u6539\u503c\uff0c\u5176\u4ed6\u7ec4\u4ef6\u8ddf\u7740\u53d8\u201d\u7684\u5171\u4eab\u95ee\u9898\u3002  <\/p>\n
              defineModel<\/code> \u8bbe\u7f6e\u9ed8\u8ba4\u503c\u7684\u5173\u952e\u662f\u5229\u7528\u7b2c\u4e8c\u4e2a\u53c2\u6570\u7684 default<\/code> \u914d\u7f6e\u9879\uff0c\u540c\u65f6\u8981\u7559\u610f\u5f15\u7528\u7c7b\u578b\u7684\u72ec\u7acb\u521d\u59cb\u5316<\/strong>\u3001\u7236\u7ec4\u4ef6\u4f20\u503c\u4f18\u5148\u7ea7<\/strong>\u3001\u7c7b\u578b\u4e0e\u4fee\u9970\u7b26\u5339\u914d<\/strong>\u8fd9\u4e9b\u8981\u70b9\uff0c\u7ed3\u5408\u6848\u4f8b\u548c\u89c4\u8303\uff0c\u65e2\u80fd\u5199\u5f97\u8f7b\u677e\uff08\u4ee3\u7801\u5c11\uff09\uff0c\u53c8\u80fd\u8fd0\u884c\u7a33\u5b9a\uff08\u903b\u8f91\u65e0\u9519\uff09,\u56e2\u961f\u534f\u4f5c\u4e5f\u66f4\u987a\u7545\uff5e<\/p>","pubDate":"Tue, 31 Mar 2026 08:01:44 +0800"},{"title":"Vue3 defineModel \u7ed3\u5408 TypeScript \u8be5\u600e\u4e48\u7528\uff1f\u5e38\u89c1\u95ee\u9898\u4e00\u6b21\u8bf4\u6e05","link":"https:\/\/codeqd.com\/post\/20260321719.html","description":"
              \u505a Vue \u9879\u76ee\u65f6\uff0c\u7ec4\u4ef6\u53cc\u5411\u7ed1\u5b9a\u4e00\u76f4\u662f\u9ad8\u9891\u9700\u6c42\uff0cVue3.4 \u63a8\u51fa\u7684 defineModel<\/code> \u628a\u4e4b\u524d\u7e41\u7410\u7684 props + emits<\/code> \u5199\u6cd5\u7b80\u5316\u4e86\uff0c\u7ed3\u5408 TypeScript \u8fd8\u80fd\u7cbe\u51c6\u63a7\u5236\u7c7b\u578b\uff0c\u4f46\u5b9e\u9645\u5f00\u53d1\u91cc\uff0c\u5927\u5bb6\u603b\u4f1a\u78b0\u5230\u201c\u7c7b\u578b\u600e\u4e48\u5199\uff1f\u591a v - model \u548b\u5904\u7406\uff1f\u65e7\u4ee3\u7801\u548b\u8fc1\u79fb\uff1f\u201d\u8fd9\u4e9b\u95ee\u9898\uff0c\u4e0b\u9762\u7528\u95ee\u7b54\u5f62\u5f0f\u628a\u6838\u5fc3\u77e5\u8bc6\u70b9\u548c\u5b9e\u6218\u6280\u5de7\u8bb2\u900f\u3002  <\/p>\n
              defineModel \u662f\u5e72\u5565\u7684\uff1f\u548c\u539f\u6765\u7684 v - model \u5b9e\u73b0\u6709\u5565\u533a\u522b\uff1f<\/h2>\n
              \u7b80\u5355\u8bf4\uff0cdefineModel<\/code> \u662f Vue3.4+ \u63d0\u4f9b\u7684\u8bed\u6cd5\u7cd6<\/strong>\uff0c\u4e13\u95e8\u7b80\u5316\u7ec4\u4ef6\u53cc\u5411\u7ed1\u5b9a\u7684\u4ee3\u7801\u3002  <\/p>\n
              \u4ee5\u524d\u8981\u5b9e\u73b0\u7ec4\u4ef6\u7684 v - model\uff0c\u5f97\u624b\u52a8\u5199 defineProps<\/code> \u63a5\u6536 modelValue<\/code>\uff0c\u518d\u7528 defineEmits<\/code> \u89e6\u53d1 update:modelValue<\/code>\uff0c\u8fd8\u5f97\u7528 computed<\/code> \u505a\u4e2d\u95f4\u5c42\uff0c\u6bd4\u5982\u8fd9\u6837\uff1a  <\/p>\n
              \/\/ \u65e7\u5199\u6cd5\uff1aprops + emits + computed\nconst props = defineProps<{ modelValue: string }>()\nconst emit = defineEmits<{ 'update:modelValue': [value: string] }>()\nconst value = computed({\n  get() { return props.modelValue },\n  set(val) { emit('update:modelValue', val) }\n})<\/pre>\n
              \u73b0\u5728\u7528 defineModel<\/code> \u76f4\u63a5\u4e00\u6b65\u5230\u4f4d\uff1a  <\/p>\n
              \/\/ \u65b0\u5199\u6cd5\uff1adefineModel \u81ea\u52a8\u5904\u7406 props + emits\nconst value = defineModel<string>()<\/pre>\n
              \u5b83\u5e95\u5c42\u8fd8\u662f\u57fa\u4e8e props<\/code> \u548c emit<\/code> \u5b9e\u73b0\u7684\uff0c\u4f46\u5e2e\u6211\u4eec\u7701\u4e86\u624b\u52a8\u5199 props<\/code> \u5b9a\u4e49\u3001emit<\/code> \u89e6\u53d1\u548c computed<\/code> \u7ed1\u5b9a\u7684\u6b65\u9aa4\uff0c\u800c\u4e14\u7ed3\u5408 TypeScript \u65f6\uff0c\u7c7b\u578b\u58f0\u660e\u66f4\u76f4\u63a5\u2014\u2014\u7ed9 defineModel<\/code> \u4f20\u6cdb\u578b\u5c31\u80fd\u7ea6\u675f\u6574\u4e2a\u53cc\u5411\u7ed1\u5b9a\u7684\u7c7b\u578b\u3002  <\/p>\n
              TypeScript \u9879\u76ee\u91cc\uff0c\u600e\u4e48\u7ed9 defineModel \u52a0\u7c7b\u578b\u7ea6\u675f\uff1f<\/h2>\n
              \u5206\u57fa\u7840\u7c7b\u578b<\/strong>\u3001\u81ea\u5b9a\u4e49\u7c7b\u578b<\/strong>\u3001\u5e26\u9ed8\u8ba4\u503c<\/strong>\u8fd9\u51e0\u79cd\u573a\u666f\uff1a  <\/p>\n
                \n
              • \n
                \u57fa\u7840\u7c7b\u578b\u76f4\u63a5\u4f20\u6cdb\u578b<\/strong>\uff1a\u6bd4\u5982\u7ec4\u4ef6\u8981\u53cc\u5411\u7ed1\u5b9a\u4e00\u4e2a\u6570\u5b57\uff0c\u76f4\u63a5\u5199 defineModel<number>()<\/code>\u3002  <\/p>\n
                const countModel = defineModel<number>()<\/pre>\n<\/li>\n
              • \n
                \u81ea\u5b9a\u4e49\u63a5\u53e3\/\u7c7b\u578b\u522b\u540d<\/strong>\uff1a\u5982\u679c\u8981\u7ed1\u5b9a\u5bf9\u8c61\uff0c\u5148\u5b9a\u4e49\u63a5\u53e3\u518d\u4f20\u6cdb\u578b\u3002  <\/p>\n
                interface User {\n  name: string;\n  age: number;\n}\nconst userModel = defineModel<User>()<\/pre>\n<\/li>\n
              • \n
                \u5e26\u9ed8\u8ba4\u503c\u7684\u60c5\u51b5<\/strong>\uff1a\u9ed8\u8ba4\u503c\u7c7b\u578b\u8981\u548c\u6cdb\u578b\u4e00\u81f4\uff0c\u5426\u5219 TS \u4f1a\u62a5\u9519\u3002  <\/p>\n
                \/\/ \u6b63\u786e\uff1a\u9ed8\u8ba4\u503c false \u662f boolean \u7c7b\u578b\uff0c\u6cdb\u578b\u4e5f\u5199 boolean\nconst isChecked = defineModel<boolean>({ default: false })  \n\/\/ \u9519\u8bef\uff1a\u9ed8\u8ba4\u503c\u662f string\uff0c\u6cdb\u578b\u5199 number \u4f1a\u62a5\u9519\nconst wrongModel = defineModel<number>({ default: 'hello' }) <\/pre>\n<\/li>\n<\/ul>\n
                \u7236\u7ec4\u4ef6\u7ed9\u5b50\u7ec4\u4ef6\u4f20\u503c\u65f6\uff0cTS \u4f1a\u81ea\u52a8\u68c0\u67e5\u7c7b\u578b\u662f\u5426\u5339\u914d\uff0c\u6bd4\u5982\u5b50\u7ec4\u4ef6\u7528 defineModel<number>()<\/code>\uff0c\u7236\u7ec4\u4ef6\u4f20\u5b57\u7b26\u4e32\u5c31\u4f1a\u89e6\u53d1\u7f16\u8bd1\u9519\u8bef\uff0c\u63d0\u524d\u62e6\u622a\u7c7b\u578b\u95ee\u9898\u3002  <\/p>\n
                defineModel \u652f\u6301\u591a\u4e2a v - model \u7ed1\u5b9a\u5417\uff1fTS \u4e0b\u600e\u4e48\u5904\u7406\u591a\u5b57\u6bb5\uff1f<\/h2>\n
                \u652f\u6301\uff01\u5b9e\u9645\u9879\u76ee\u91cc\u7ecf\u5e38\u9700\u8981\u201c\u591a\u5b57\u6bb5\u53cc\u5411\u7ed1\u5b9a\u201d\uff08\u6bd4\u5982\u8868\u5355\u91cc\u7684\u6807\u9898\u3001\u5185\u5bb9\u5206\u5f00\u7ed1\u5b9a\uff09\uff0c\u8fd9\u65f6\u8981\u7ed9 defineModel<\/code> \u52a0 name<\/code> \u53c2\u6570\uff0c\u540c\u65f6\u7528\u6cdb\u578b\u7ea6\u675f\u6bcf\u4e2a\u5b57\u6bb5\u7684\u7c7b\u578b\u3002  <\/p>\n
                \u4e3e\u4e2a\u4f8b\u5b50\uff1a\u5b50\u7ec4\u4ef6\u8981\u540c\u65f6\u7ed1\u5b9a title<\/code>\uff08\u5b57\u7b26\u4e32\uff09\u548c content<\/code>\uff08\u5b57\u7b26\u4e32\u6570\u7ec4\uff09\u4e24\u4e2a\u5b57\u6bb5\u3002  <\/p>\n
                \u5b50\u7ec4\u4ef6\u4ee3\u7801\uff1a  <\/p>\n
                \/\/ \u7ed1\u5b9a title\uff0cname \u5bf9\u5e94\u7236\u7ec4\u4ef6\u7684 v - model:title\nconst titleModel = defineModel<string>({ name: 'title' })  \n\/\/ \u7ed1\u5b9a content\uff0cname \u5bf9\u5e94\u7236\u7ec4\u4ef6\u7684 v - model:content\nconst contentModel = defineModel<string[]>({ name: 'content' })  <\/pre>\n
                \u7236\u7ec4\u4ef6\u4f7f\u7528\u65f6\uff0c\u7528 v - model:title<\/code> \u548c v - model:content<\/code> \u5206\u522b\u7ed1\u5b9a\uff1a  <\/p>\n
                <ChildComponent \n  v - model:title="parentTitle" \n  v - model:content="parentContent" \n\/><\/pre>\n
                \u8fd9\u79cd\u5199\u6cd5\u4e0b\uff0c\u6bcf\u4e2a defineModel<\/code> \u7684\u6cdb\u578b\u72ec\u7acb\u7ea6\u675f\uff0cTS \u4f1a\u5206\u522b\u68c0\u67e5 titleModel.value<\/code>\uff08\u5fc5\u987b\u662f string\uff09\u548c contentModel.value<\/code>\uff08\u5fc5\u987b\u662f string[]\uff09\uff0c\u907f\u514d\u7c7b\u578b\u6df7\u6dc6\u3002  <\/p>\n
                \u7236\u7ec4\u4ef6\u4f20\u503c\u548c\u5b50\u7ec4\u4ef6\u4fee\u6539\u7684\u54cd\u5e94\u5f0f\u548b\u4fdd\u8bc1\uff1fTS \u7c7b\u578b\u4f1a\u5f71\u54cd\u54cd\u5e94\u6027\u5417\uff1f<\/h2>\n
                defineModel<\/code> \u8fd4\u56de\u7684\u662f\u54cd\u5e94\u5f0f\u7684 ref<\/strong>\uff0c\u6240\u4ee5\u7236\u7ec4\u4ef6\u4f20\u503c\u53d8\u5316\u65f6\uff0c\u5b50\u7ec4\u4ef6\u80fd\u5b9e\u65f6\u62ff\u5230\u6700\u65b0\u503c\uff1b\u5b50\u7ec4\u4ef6\u4fee\u6539 model.value<\/code> \u65f6\uff0c\u7236\u7ec4\u4ef6\u4e5f\u80fd\u540c\u6b65\u66f4\u65b0\u3002  <\/p>\n
                TS \u7c7b\u578b\u53ea\u662f\u7f16\u8bd1\u65f6\u7684\u9759\u6001\u68c0\u67e5<\/strong>\uff0c\u4e0d\u5f71\u54cd\u8fd0\u884c\u65f6\u7684\u54cd\u5e94\u6027\uff0c\u6bd4\u5982\u5b50\u7ec4\u4ef6\u7528 defineModel<number>()<\/code>\uff0c\u7236\u7ec4\u4ef6\u4f20 10<\/code>\uff0c\u5b50\u7ec4\u4ef6\u4fee\u6539 model.value = 20<\/code>\uff0c\u7236\u7ec4\u4ef6\u80fd\u7acb\u523b\u62ff\u5230 20<\/code>\u2014\u2014\u8fd9\u90e8\u5206\u903b\u8f91\u7531 Vue \u7684\u54cd\u5e94\u5f0f\u7cfb\u7edf\u4fdd\u969c\uff0c\u548c TS \u7c7b\u578b\u65e0\u5173\u3002  <\/p>\n
                \u6362\u53e5\u8bdd\u8bf4\uff0cTS \u5e2e\u6211\u4eec\u201c\u9632\u5446\u201d\uff08\u6bd4\u5982\u907f\u514d\u628a\u5b57\u7b26\u4e32\u4f20\u7ed9\u6570\u5b57\u7c7b\u578b\u7684 model\uff09\uff0c\u4f46\u4e0d\u5f71\u54cd\u53cc\u5411\u7ed1\u5b9a\u7684\u54cd\u5e94\u5f0f\u6548\u679c\u3002  <\/p>\n
                \u5b9e\u9645\u9879\u76ee\u4e2d\uff0c\u7528 defineModel + TS \u505a\u8868\u5355\u7ec4\u4ef6\u6709\u5565\u6280\u5de7\uff1f<\/h2>\n
                \u8868\u5355\u662f\u53cc\u5411\u7ed1\u5b9a\u7684\u9ad8\u9891\u573a\u666f\uff0c\u7ed3\u5408 TS \u80fd\u51cf\u5c11\u5f88\u591a\u8fd0\u884c\u65f6\u9519\u8bef\uff0c\u5206\u4eab\u4e24\u4e2a\u5b9e\u7528\u6280\u5de7\uff1a  <\/p>\n
                \u6280\u5de7 1\uff1a\u5c01\u88c5\u5e26\u7c7b\u578b\u7684 Input \u7ec4\u4ef6<\/h3>\n
                \u6bd4\u5982\u505a\u4e00\u4e2a\u81ea\u5b9a\u4e49\u8f93\u5165\u6846\uff0c\u7ea6\u675f\u503c\u4e3a\u5b57\u7b26\u4e32\uff0c\u540c\u65f6\u652f\u6301\u9ed8\u8ba4\u503c\uff1a  <\/p>\n
                <template>\n  <input \n    :value="inputModel.value" \n    @input="handleInput" \n    placeholder="\u8bf7\u8f93\u5165\u5185\u5bb9" \n  \/>\n<\/template>\n<script setup lang="ts">\nconst inputModel = defineModel<string>({ default: '' })\nfunction handleInput(e: Event) {\n  \/\/ TS \u7c7b\u578b\u65ad\u8a00\uff1a\u628a event.target \u8f6c\u6210 HTMLInputElement\n  const target = e.target as HTMLInputElement\n  inputModel.value = target.value \/\/ \u8fd9\u91cc TS \u4f1a\u68c0\u67e5\u662f\u5426\u662f string\uff0ctarget.value \u5929\u7136\u662f string\uff0c\u5b8c\u7f8e\u5339\u914d\n}\n<\/script><\/pre>\n
                \u7236\u7ec4\u4ef6\u7528\u7684\u65f6\u5019\uff0c\u7c7b\u578b\u4e0d\u5339\u914d\u4f1a\u76f4\u63a5\u62a5\u9519\uff1a  <\/p>\n
                <!-- \u6b63\u786e\uff1a\u4f20 string \u7c7b\u578b -->\n<CustomInput v - model="parentString" \/>  \n<!-- \u9519\u8bef\uff1a\u4f20 number \u7c7b\u578b\uff0cTS \u7f16\u8bd1\u9636\u6bb5\u5c31\u4f1a\u62a5\u9519 -->\n<CustomInput v - model="parentNumber" \/> <\/pre>\n
                \u6280\u5de7 2\uff1a\u7ed3\u5408 Zod \u505a\u590d\u6742\u7c7b\u578b\u9a8c\u8bc1<\/h3>\n
                \u5982\u679c\u8868\u5355\u9700\u8981\u66f4\u4e25\u683c\u7684\u9a8c\u8bc1\uff08\u6bd4\u5982\u624b\u673a\u53f7\u3001\u5bc6\u7801\u683c\u5f0f\uff09\uff0c\u53ef\u4ee5\u7528 Zod \u5e93\u5b9a\u4e49 schema\uff0c\u518d\u548c defineModel<\/code> \u7684\u7c7b\u578b\u8054\u52a8\u3002  <\/p>\n
                \u793a\u4f8b\uff1a\u7ea6\u675f\u8f93\u5165\u4e3a\u5408\u6cd5\u624b\u673a\u53f7\uff0811 \u4f4d\u6570\u5b57\uff09\uff1a  <\/p>\n
                import { z } from 'zod'\n\/\/ Zod \u5b9a\u4e49\u624b\u673a\u53f7 schema\nconst PhoneSchema = z.string().regex(\/^1\\d{10}$\/)\ntype Phone = z.infer<typeof PhoneSchema> \/\/ \u63d0\u53d6 TypeScript \u7c7b\u578b\nconst phoneModel = defineModel<Phone>()\n\/\/ \u9a8c\u8bc1\u903b\u8f91\uff08\u8f93\u5165\u65f6\u5b9e\u65f6\u68c0\u67e5\uff09\nfunction onInput(e: Event) {\n  const target = e.target as HTMLInputElement\n  const val = target.value\n  \/\/ \u7528 Zod \u9a8c\u8bc1\uff0c\u901a\u8fc7\u540e\u518d\u8d4b\u503c\n  if (PhoneSchema.safeParse(val).success) {\n    phoneModel.value = val\n  }\n}<\/pre>\n
                \u8fd9\u6837\u65e2\u7528 TS \u7ea6\u675f\u4e86\u7c7b\u578b\uff0c\u53c8\u7528 Zod \u505a\u4e86\u8fd0\u884c\u65f6\u9a8c\u8bc1\uff0c\u8868\u5355\u66f4\u5065\u58ee\u3002  <\/p>\n
                defineModel \u548c computed \u7ed3\u5408\u5904\u7406\u590d\u6742\u903b\u8f91\u65f6\uff0cTS \u7c7b\u578b\u548b\u5199\uff1f<\/h2>\n
                \u5f88\u591a\u573a\u666f\u4e0b\uff0c\u6211\u4eec\u9700\u8981\u57fa\u4e8e defineModel<\/code> \u7684\u503c\u505a\u201c\u8ba1\u7b97\u5c5e\u6027 + \u53cc\u5411\u7ed1\u5b9a\u201d\uff0c\u663e\u793a\u683c\u5f0f\u5316\u540e\u7684\u503c\uff0c\u4fee\u6539\u65f6\u8fd8\u539f\u539f\u59cb\u7c7b\u578b\u201d\u3002  <\/p>\n
                \u4e3e\u4e2a\u4f8b\u5b50\uff1a\u5b50\u7ec4\u4ef6\u7ed1\u5b9a\u4e00\u4e2a\u6570\u5b57\uff0c\u663e\u793a\u65f6\u8f6c\u6210\u767e\u5206\u6bd4\u5b57\u7b26\u4e32\uff0c\u4fee\u6539\u65f6\u518d\u8f6c\u6210\u6570\u5b57\u3002  <\/p>\n
                \u4ee3\u7801\u5b9e\u73b0\uff1a  <\/p>\n
                const numberModel = defineModel<number>()\n\/\/ \u8ba1\u7b97\u5c5e\u6027\uff1a\u663e\u793a\u767e\u5206\u6bd4\u5b57\u7b26\u4e32\uff0c\u4fee\u6539\u65f6\u8f6c\u56de\u6570\u5b57\nconst percent = computed({\n  get() { \n    return `${numberModel.value * 100}%` \n  },\n  set(formattedVal) { \n    \/\/ \u8f6c\u6210\u6570\u5b57\u524d\uff0c\u7528 TS \u7c7b\u578b\u5b88\u536b\u907f\u514d NaN\n    const num = parseFloat(formattedVal)\n    if (!isNaN(num)) {\n      numberModel.value = num \/ 100 \n    }\n  }\n})<\/pre>\n
                \u8fd9\u91cc TS \u80fd\u81ea\u52a8\u63a8\u65ad\uff1a  <\/p>\n
                  \n
                • percent<\/code> \u7684 get \u7ed3\u679c\u662f string\uff08\u56e0\u4e3a\u62fc\u63a5\u4e86 \uff09\uff1b  <\/li>\n
                • set \u63a5\u6536\u7684\u53c2\u6570\u662f string\uff0c\u5185\u90e8\u5904\u7406\u540e\u7ed9 numberModel.value<\/code>\uff08\u5fc5\u987b\u662f number\uff09\u8d4b\u503c\u3002  <\/li>\n<\/ul>\n
                  \u5982\u679c\u903b\u8f91\u66f4\u590d\u6742\uff08\u6bd4\u5982\u5bf9\u8c61\u7684\u5d4c\u5957\u5c5e\u6027\uff09\uff0c\u53ea\u8981\u4fdd\u8bc1 computed<\/code> \u7684 setter \u6700\u7ec8\u7ed9 defineModel<\/code> \u8d4b\u503c\u7684\u7c7b\u578b\u548c\u6cdb\u578b\u4e00\u81f4\uff0cTS \u5c31\u4e0d\u4f1a\u62a5\u9519\u3002  <\/p>\n
                  \u9047\u5230 defineModel \u7c7b\u578b\u4e0d\u5339\u914d\u7684\u62a5\u9519\uff0c\u600e\u4e48\u6392\u67e5\uff1f<\/h2>\n
                  \u7c7b\u578b\u4e0d\u5339\u914d\u662f\u6700\u5e38\u89c1\u7684\u95ee\u9898\uff0c\u6309\u8fd9\u4e09\u6b65\u6392\u67e5\uff1a  <\/p>\n
                    \n
                  1. \n
                    \u68c0\u67e5\u7236\u7ec4\u4ef6\u4f20\u503c\u7c7b\u578b<\/strong>\uff1a\u6bd4\u5982\u5b50\u7ec4\u4ef6\u7528 defineModel<number>()<\/code>\uff0c\u7236\u7ec4\u4ef6\u4f20\u4e86 string<\/code> \u7c7b\u578b\u7684\u53d8\u91cf\uff0cTS \u4f1a\u6807\u7ea2\u62a5\u9519\u3002  <\/p>\n<\/li>\n
                  2. \n
                    \u68c0\u67e5\u5b50\u7ec4\u4ef6 defineModel \u7684\u6cdb\u578b<\/strong>\uff1a\u786e\u8ba4\u6cdb\u578b\u548c\u9ed8\u8ba4\u503c\uff08\u5982\u679c\u6709\uff09\u7684\u7c7b\u578b\u4e00\u81f4\u3002defineModel<boolean>({ default: 'true' })<\/code> \u4f1a\u62a5\u9519\uff0c\u56e0\u4e3a\u9ed8\u8ba4\u503c\u662f string\uff0c\u6cdb\u578b\u662f boolean\u3002  <\/p>\n<\/li>\n
                  3. \n
                    \u68c0\u67e5\u624b\u52a8 emit \u7684\u60c5\u51b5<\/strong>\uff1a\u5982\u679c\u9879\u76ee\u91cc\u8fd8\u6df7\u5408\u4e86\u65e7\u5199\u6cd5\uff08\u624b\u52a8\u5199 emit('update:xxx')<\/code>\uff09\uff0c\u8981\u786e\u8ba4 emit \u7684\u53c2\u6570\u7c7b\u578b\u548c defineModel<\/code> \u7684\u6cdb\u578b\u4e00\u81f4\u3002defineModel<\/code> \u63a8\u8350\u81ea\u52a8\u5904\u7406\uff0c\u5c3d\u91cf\u5c11\u624b\u52a8\u5199 emit\u3002  <\/p>\n<\/li>\n<\/ol>\n
                    \u8b66\u60d5\u4ee3\u7801\u91cc\u7684 any<\/code> \u7c7b\u578b\u2014\u2014\u5982\u679c\u67d0\u4e2a\u53d8\u91cf\u7528\u4e86 any<\/code>\uff0cTS \u7684\u7c7b\u578b\u68c0\u67e5\u4f1a\u5931\u6548\uff0c\u5bfc\u81f4\u9690\u60a3\u57cb\u5230\u8fd0\u884c\u65f6\uff0c\u53ef\u4ee5\u7528 VSCode \u5168\u5c40\u641c\u7d22 any<\/code>\uff0c\u9010\u6b65\u66ff\u6362\u6210\u7cbe\u786e\u7c7b\u578b\u3002  <\/p>\n
                    \u5347\u7ea7 Vue3.4 \u540e\uff0c\u65e7\u9879\u76ee\u7684 v - model \u4ee3\u7801\u548b\u8fc1\u79fb\uff1fTS \u90e8\u5206\u8981\u6ce8\u610f\u5565\uff1f<\/h2>\n
                    \u65e7\u9879\u76ee\u91cc\u7528 props + emits + computed<\/code> \u5b9e\u73b0\u7684 v - model\uff0c\u8fc1\u79fb\u5230 defineModel<\/code> \u5f88\u7b80\u5355\uff0c\u4f46 TS \u90e8\u5206\u8981\u5173\u6ce8\u8fd9\u51e0\u70b9\uff1a  <\/p>\n
                    \u6b65\u9aa4 1\uff1a\u66ff\u6362\u4ee3\u7801\u7ed3\u6784<\/h3>\n
                    \u65e7\u4ee3\u7801\uff08\u4ee5\u5355\u5b57\u6bb5 v - model \u4e3a\u4f8b\uff09\uff1a  <\/p>\n
                    const props = defineProps<{ modelValue: string }>()\nconst emit = defineEmits<{ 'update:modelValue': [value: string] }>()\nconst value = computed({\n  get() { return props.modelValue },\n  set(val) { emit('update:modelValue', val) }\n})<\/pre>\n
                    \u8fc1\u79fb\u540e\u76f4\u63a5\u66ff\u6362\u6210\uff1a  <\/p>\n
                    const value = defineModel<string>()<\/pre>\n
                    \u6b65\u9aa4 2\uff1a\u5904\u7406\u591a\u5b57\u6bb5 v - model<\/h3>\n
                    \u5982\u679c\u65e7\u4ee3\u7801\u7528\u4e86 v - model:foo<\/code>\uff0c\u539f\u6765\u7684 props.foo<\/code> \u548c emit('update:foo')<\/code>\uff0c\u73b0\u5728\u7ed9 defineModel<\/code> \u52a0 name: 'foo'<\/code>\uff1a  <\/p>\n
                    \/\/ \u65e7\u591a\u5b57\u6bb5\u5199\u6cd5\nconst props = defineProps<{ foo: number; bar: string }>()\nconst emit = defineEmits<{ 'update:foo': [value: number]; 'update:bar': [value: string] }>()\nconst foo = computed({ \/* ... *\/ })\nconst bar = computed({ \/* ... *\/ })\n\/\/ \u8fc1\u79fb\u540e\nconst foo = defineModel<number>({ name: 'foo' })\nconst bar = defineModel<string>({ name: 'bar' })<\/pre>\n
                    \u6b65\u9aa4 3\uff1a\u68c0\u67e5\u6a21\u677f\u7ed1\u5b9a<\/h3>\n
                    \u65e7\u4ee3\u7801\u91cc\u6a21\u677f\u53ef\u80fd\u624b\u52a8\u5199\u4e86 value=\"foo\"<\/code> \u548c @input=\"emit('update:foo', $event)\"<\/code>\uff0c\u8fc1\u79fb\u540e\u8fd9\u4e9b\u53ef\u4ee5\u5220\u6389\uff0c\u76f4\u63a5\u7528 defineModel<\/code> \u8fd4\u56de\u7684 ref \u7ed1\u5b9a\u5230\u8f93\u5165\u7ec4\u4ef6\uff08<input :value=\"foo.value\" @input=\"foo.value = $event.target.value\" \/><\/code>\uff09\u3002  <\/p>\n
                    \u5ef6\u4f38\uff1adefineModel \u7684\u539f\u7406\u548c TS \u7684\u4ef7\u503c<\/h2>\n
                    defineModel<\/code> \u672c\u8d28\u662f\u7f16\u8bd1\u65f6\u8bed\u6cd5\u7cd6<\/strong>\uff1aVue \u4f1a\u628a defineModel<\/code> \u8f6c\u6362\u6210 props<\/code>\uff08\u63a5\u6536\u5bf9\u5e94\u5b57\u6bb5\uff09 + emit<\/code>\uff08\u89e6\u53d1\u66f4\u65b0\uff09 + ref<\/code>\uff08\u54cd\u5e94\u5f0f\u53d8\u91cf\uff09\u7684\u7ec4\u5408\uff0c\u4f46\u5bf9\u5f00\u53d1\u8005\u6765\u8bf4\uff0c\u4e0d\u7528\u5173\u5fc3\u5e95\u5c42\u7ec6\u8282\uff0c\u53ea\u9700\u8981\u4e13\u6ce8\u4e1a\u52a1\u903b\u8f91\u548c\u7c7b\u578b\u7ea6\u675f\u3002  <\/p>\n
                    \u800c TypeScript \u5728\u8fd9\u4e2a\u8fc7\u7a0b\u4e2d\uff0c\u5e2e\u6211\u4eec\u505a\u4e86\u201c\u9759\u6001\u7c7b\u578b\u5951\u7ea6\u201d<\/strong>\uff1a\u4ece\u7236\u7ec4\u4ef6\u4f20\u503c\u3001\u5b50\u7ec4\u4ef6\u5185\u90e8\u4fee\u6539\uff0c\u5230\u591a\u5b57\u6bb5\u7ed1\u5b9a\uff0c\u6bcf\u4e00\u6b65\u7684\u7c7b\u578b\u90fd\u88ab\u4e25\u683c\u9650\u5236\uff0c\u8fd9\u4e0d\u4ec5\u51cf\u5c11\u4e86\u8fd0\u884c\u65f6\u9519\u8bef\uff0c\u8fd8\u8ba9\u4ee3\u7801\u7684\u53ef\u8bfb\u6027\u548c\u53ef\u7ef4\u62a4\u6027\u5927\u5e45\u63d0\u5347\u2014\u2014\u522b\u4eba\u770b\u4ee3\u7801\u65f6\uff0c\u4ece defineModel<XXX><\/code> \u5c31\u80fd\u7acb\u523b\u660e\u767d\u8fd9\u4e2a\u53cc\u5411\u7ed1\u5b9a\u7684\u7c7b\u578b\u662f\u4ec0\u4e48\u3002  <\/p>\n
                    defineModel<\/code> \u8ba9 Vue \u7ec4\u4ef6\u7684\u53cc\u5411\u7ed1\u5b9a\u66f4\u7b80\u6d01\uff0c\u7ed3\u5408 TypeScript \u540e\u53c8\u80fd\u901a\u8fc7\u7c7b\u578b\u7ea6\u675f\u63d0\u524d\u89c4\u907f\u5927\u91cf\u9519\u8bef\uff0c\u638c\u63e1\u201c\u6cdb\u578b\u58f0\u660e\u201d\u201c\u591a\u5b57\u6bb5\u5904\u7406\u201d\u201c\u65e7\u4ee3\u7801\u8fc1\u79fb\u201d\u8fd9\u4e9b\u77e5\u8bc6\u70b9\uff0c\u518d\u7ed3\u5408\u8868\u5355\u3001\u590d\u6742\u8ba1\u7b97\u7b49\u5b9e\u6218\u573a\u666f\uff0c\u5c31\u80fd\u628a\u8fd9\u4e2a\u8bed\u6cd5\u7528\u5f97\u987a\u624b\u53c8\u5b89\u5168\uff5e  <\/p>\n
                    \uff08\u5982\u679c\u60f3\u6df1\u5165\uff0c\u8fd8\u53ef\u4ee5\u53bb\u770b Vue \u5b98\u65b9\u6587\u6863\u91cc\u7684 defineModel \u7ae0\u8282\uff0c\u6216\u8005\u5728\u9879\u76ee\u91cc\u591a\u5199\u51e0\u4e2a\u5e26\u7c7b\u578b\u7684\u81ea\u5b9a\u4e49\u7ec4\u4ef6\uff0c\u7ec3\u624b\u540e\u7406\u89e3\u66f4\u900f\u5f7b\uff5e\uff09<\/p>","pubDate":"Mon, 30 Mar 2026 20:02:43 +0800"},{"title":"Vue3\u4e2ddefineModel\u600e\u4e48\u5904\u7406\u6570\u7ec4\u7684\u53cc\u5411\u7ed1\u5b9a\uff1f\u8fd9\u4e9b\u7ec6\u8282\u8981\u6ce8\u610f\uff01","link":"https:\/\/codeqd.com\/post\/20260321718.html","description":"
                    \u4e0d\u5c11\u540c\u5b66\u5728Vue3\u5f00\u53d1\u91cc\uff0c\u60f3\u7528defineModel<\/code>\u5b9e\u73b0\u6570\u7ec4\u7684\u53cc\u5411\u7ed1\u5b9a\uff0c\u5374\u78b0\u5230\u201c\u4fee\u6539\u4e86\u6570\u7ec4\u4f46\u7236\u7ec4\u4ef6\u6ca1\u540c\u6b65\u201d\u201c\u4e0d\u77e5\u9053\u600e\u4e48\u6b63\u786e\u89e6\u53d1\u66f4\u65b0\u201d\u8fd9\u4e9b\u95ee\u9898\uff0c\u4eca\u5929\u54b1\u4eec\u5c31\u628adefineModel\u5904\u7406\u6570\u7ec4\u53cc\u5411\u7ed1\u5b9a<\/strong>\u7684\u903b\u8f91\u3001\u6b65\u9aa4\u3001\u5751\u70b9\u63b0\u5f00\u4e86\u8bb2\u6e05\u695a\uff5e  <\/p>\n
                    defineModel \u662f\u5e72\u5565\u7684\uff1f\u548c\u6570\u7ec4\u53cc\u5411\u7ed1\u5b9a\u6709\u5565\u5173\u7cfb\uff1f<\/h2>\n
                    \u5148\u641e\u61c2defineModel<\/code>\u7684\u4f5c\u7528\uff1a\u5b83\u662fVue3.4+\u63a8\u51fa\u7684\u8bed\u6cd5\u7cd6<\/strong>\uff0c\u5e2e\u6211\u4eec\u7b80\u5316\u201c\u7ec4\u4ef6\u548c\u7236\u7ec4\u4ef6\u53cc\u5411\u7ed1\u5b9a\u201d\u7684\u4ee3\u7801\uff0c\u4ee5\u524d\u5199\u81ea\u5b9a\u4e49v-model<\/code>\uff0c\u5f97\u540c\u65f6\u7528defineProps<\/code>\u63a5\u6536\u503c\u3001defineEmits<\/code>\u89e6\u53d1\u66f4\u65b0\uff0c\u73b0\u5728\u7528defineModel<\/code>\u4e00\u884c\u4ee3\u7801\u5c31\u80fd\u641e\u5b9a\u53cc\u5411\u7ed1\u5b9a\u903b\u8f91\u3002  <\/p>\n
                    \u90a3\u548c\u6570\u7ec4\u53cc\u5411\u7ed1\u5b9a\u6709\u5565\u8054\u7cfb\uff1f\u6bd4\u5982\u7236\u7ec4\u4ef6\u4f20\u4e00\u4e2a\u4efb\u52a1\u5217\u8868\u6570\u7ec4<\/strong>\u7ed9\u5b50\u7ec4\u4ef6\uff0c\u5b50\u7ec4\u4ef6\u4fee\u6539\u6570\u7ec4\uff08\u65b0\u589e\u3001\u4fee\u6539\u4efb\u52a1\u72b6\u6001\uff09\u540e\uff0c\u7236\u7ec4\u4ef6\u80fd\u81ea\u52a8\u540c\u6b65\u53d8\u5316\uff1b\u53cd\u8fc7\u6765\u7236\u7ec4\u4ef6\u6539\u4e86\u6570\u7ec4\uff0c\u5b50\u7ec4\u4ef6\u4e5f\u80fd\u540c\u6b65\uff0c\u8fd9\u79cd\u201c\u7236\u5b50\u7ec4\u4ef6\u6570\u7ec4\u6570\u636e\u53cc\u5411\u540c\u6b65\u201d\u7684\u573a\u666f\uff0c\u5c31\u9700\u8981defineModel<\/code>\u6765\u7b80\u5316\u5b9e\u73b0\u3002  <\/p>\n
                    \u600e\u4e48\u7528 defineModel \u5b9e\u73b0\u6570\u7ec4\u7684\u53cc\u5411\u7ed1\u5b9a\uff1f\u6b65\u9aa4\u662f\u5565\uff1f<\/h2>\n
                    \u6838\u5fc3\u903b\u8f91\u662f\uff1a\u5b50\u7ec4\u4ef6\u7528defineModel<\/code>\u58f0\u660e\u53cc\u5411\u7ed1\u5b9a\u7684\u6570\u7ec4 \u2192 \u5b50\u7ec4\u4ef6\u4fee\u6539\u6570\u7ec4\u65f6\u89e6\u53d1\u54cd\u5e94\u5f0f\u66f4\u65b0 \u2192 \u7236\u7ec4\u4ef6\u7528v-model:xxx<\/code>\u4f20\u503c<\/strong>\uff0c\u5177\u4f53\u5206\u4e09\u6b65\uff1a  <\/p>\n
                    \u6b65\u9aa41\uff1a\u7236\u7ec4\u4ef6\u4f20\u6570\u7ec4\uff0c\u7528v-model:xxx<\/code>\u7ed1\u5b9a<\/h3>\n
                    \u7236\u7ec4\u4ef6\u91cc\uff0c\u628a\u8981\u53cc\u5411\u7ed1\u5b9a\u7684\u6570\u7ec4\u7528v-model:\u81ea\u5b9a\u4e49\u540d<\/code>\u4f20\u7ed9\u5b50\u7ec4\u4ef6\uff0c\u6bd4\u5982\u7236\u7ec4\u4ef6\u6709\u4e2atasks<\/code>\u6570\u7ec4\uff0c\u4f20\u7ed9\u5b50\u7ec4\u4ef6\u7684TodoList<\/code>\uff1a  <\/p>\n
                    <template>\n  <!-- \u7236\u7ec4\u4ef6\uff1a\u7528v-model:tasks\u7ed1\u5b9a\u6570\u7ec4 -->\n  <TodoList v-model:tasks="parentTasks" \/>\n<\/template>\n<script setup>\nimport { ref } from 'vue'\nimport TodoList from '.\/TodoList.vue'\n\/\/ \u7236\u7ec4\u4ef6\u7684\u54cd\u5e94\u5f0f\u6570\u7ec4\nconst parentTasks = ref([\n  { id: 1, text: '\u5b66\u4e60Vue', done: false },\n  { id: 2, text: '\u5199\u6587\u7ae0', done: false }\n])\n<\/script><\/pre>\n
                    \u6b65\u9aa42\uff1a\u5b50\u7ec4\u4ef6\u7528defineModel<\/code>\u58f0\u660e\u6570\u7ec4<\/h3>\n
                    \u5b50\u7ec4\u4ef6\u91cc\uff0c\u7528defineModel('\u81ea\u5b9a\u4e49\u540d')<\/code>\u63a5\u6536\u7236\u7ec4\u4ef6\u7684\u6570\u7ec4\uff0c\u5b83\u8fd4\u56de\u4e00\u4e2aref<\/code>\uff0c\u6bd4\u5982\u5b50\u7ec4\u4ef6\u63a5\u6536tasks<\/code>\uff1a  <\/p>\n
                    <script setup>\n\/\/ \u5b50\u7ec4\u4ef6\uff1adefineModel\u58f0\u660e\u53cc\u5411\u7ed1\u5b9a\u7684tasks\nconst tasks = defineModel('tasks') \n<\/script><\/pre>\n
                    \u6b65\u9aa43\uff1a\u5b50\u7ec4\u4ef6\u4fee\u6539\u6570\u7ec4\uff0c\u89e6\u53d1\u53cc\u5411\u66f4\u65b0<\/h3>\n
                    \u5b50\u7ec4\u4ef6\u91cc\u4fee\u6539tasks.value<\/code>\u65f6\uff0c\u8981\u8ba9Vue\u201c\u68c0\u6d4b\u5230\u6570\u7ec4\u53d8\u5316\u201d\uff0c\u56e0\u4e3aVue\u5bf9\u6570\u7ec4\u7684\u54cd\u5e94\u5f0f\u5904\u7406\u53ea\u52ab\u6301\u4e867\u4e2a\u53d8\u5f02\u65b9\u6cd5<\/strong>\uff08push\/pop\/shift\/unshift\/splice\/sort\/reverse<\/code>\uff09\uff0c\u6240\u4ee5\u4fee\u6539\u6570\u7ec4\u65f6\u8981\u6ce8\u610f\uff1a  <\/p>\n
                      \n
                    • \u7528\u53d8\u5f02\u65b9\u6cd5<\/strong>\u4fee\u6539\uff1a\u6bd4\u5982tasks.value.push(newTask)<\/code>\uff0c\u56e0\u4e3apush<\/code>\u662f\u88ab\u52ab\u6301\u7684\u65b9\u6cd5\uff0c\u8c03\u7528\u540e\u4f1a\u89e6\u53d1\u66f4\u65b0\uff0c\u7236\u7ec4\u4ef6\u80fd\u540c\u6b65\u3002  <\/li>\n
                    • \u66ff\u6362\u6574\u4e2a\u6570\u7ec4\uff1a\u6bd4\u5982tasks.value = [...tasks.value, newTask]<\/code>\uff0c\u66ff\u6362\u6570\u7ec4\u7684\u5f15\u7528\uff0cVue\u80fd\u68c0\u6d4b\u5230\u53d8\u5316\u3002  <\/li>\n<\/ul>\n
                      \u4e3e\u4e2a\u201c\u5b50\u7ec4\u4ef6\u65b0\u589e\u4efb\u52a1\u201d\u7684\u4f8b\u5b50\uff1a  <\/p>\n
                      <template>\n  <button @click="addTask">\u5b50\u7ec4\u4ef6\u65b0\u589e\u4efb\u52a1<\/button>\n<\/template>\n<script setup>\nconst tasks = defineModel('tasks') \nconst newTaskText = ref('\u65b0\u4efb\u52a1')\nfunction addTask() {\n  \/\/ \u7528push\uff08\u53d8\u5f02\u65b9\u6cd5\uff09\u89e6\u53d1\u66f4\u65b0\n  tasks.value.push({ id: Date.now(), text: newTaskText.value, done: false })\n}\n<\/script><\/pre>\n
                      \u6570\u7ec4\u53cc\u5411\u7ed1\u5b9a\u65f6\uff0c\u76f4\u63a5\u4fee\u6539\u6570\u7ec4\u5143\u7d20\u4e3a\u5565\u4e0d\u751f\u6548\uff1f\u548b\u89e3\u51b3\uff1f<\/h2>\n
                      \u5f88\u591a\u540c\u5b66\u78b0\u5230\u8fc7\u8fd9\u4e2a\u95ee\u9898\uff1a\u5b50\u7ec4\u4ef6\u91cc\u76f4\u63a5\u6539\u6570\u7ec4\u5143\u7d20\u7684\u5c5e\u6027\uff08\u6bd4\u5982tasks.value[0].done = true<\/code>\uff09\uff0c\u7236\u7ec4\u4ef6\u7684\u6570\u7ec4\u5374\u6ca1\u540c\u6b65\uff0c\u8fd9\u662f\u56e0\u4e3aVue\u5bf9\u6570\u7ec4\u7684\u201c\u7d22\u5f15\u8d4b\u503c\u201d\u9ed8\u8ba4\u4e0d\u89e6\u53d1\u54cd\u5e94\u5f0f\u66f4\u65b0<\/strong>\uff08\u6027\u80fd\u8003\u91cf\uff0c\u6570\u7ec4\u957f\u5ea6\u5927\u65f6\u5168\u52ab\u6301\u7d22\u5f15\u4e0d\u73b0\u5b9e\uff09\u3002  <\/p>\n
                      \u95ee\u9898\u590d\u73b0\uff08\u9519\u8bef\u5199\u6cd5\uff09\uff1a<\/h3>\n
                      <script setup>\nconst tasks = defineModel('tasks') \nfunction wrongUpdate() {\n  \/\/ \u76f4\u63a5\u6539\u6570\u7ec4\u5143\u7d20\u7684\u5c5e\u6027\uff0cVue\u68c0\u6d4b\u4e0d\u5230\u6570\u7ec4\u53d8\u5316\n  tasks.value[0].done = true \n}\n<\/script><\/pre>\n
                      \u89e3\u51b3\u65b9\u6cd5\uff083\u79cd\u601d\u8def\uff09\uff1a<\/h3>\n
                        \n
                      • \n
                        \u65b9\u6cd51\uff1a\u7528\u6570\u7ec4\u53d8\u5f02\u65b9\u6cd5\uff08\u5982splice\uff09<\/strong>
                        \nsplice<\/code>\u80fd\u4fee\u6539\u6570\u7ec4\u5e76\u89e6\u53d1\u66f4\u65b0\uff0c\u6bd4\u5982\u66ff\u6362\u7b2c\u4e00\u4e2a\u5143\u7d20\uff1a  <\/p>\n
                        function correctUpdate() {\n  \/\/ splice(\u8d77\u59cb\u7d22\u5f15, \u5220\u9664\u4e2a\u6570, \u65b0\u589e\u5143\u7d20)\n  tasks.value.splice(0, 1, { ...tasks.value[0], done: true })\n}<\/pre>\n<\/li>\n
                      • \n
                        \u65b9\u6cd52\uff1a\u66ff\u6362\u6574\u4e2a\u6570\u7ec4<\/strong>
                        \n\u5148\u590d\u5236\u6570\u7ec4\uff0c\u4fee\u6539\u540e\u66ff\u6362\u539f\u6570\u7ec4\uff0c\u8ba9Vue\u68c0\u6d4b\u5230\u5f15\u7528\u53d8\u5316\uff1a  <\/p>\n
                        function correctUpdate() {\n  const newTasks = [...tasks.value] \/\/ \u590d\u5236\u6570\u7ec4\n  newTasks[0].done = true \/\/ \u4fee\u6539\u590d\u5236\u540e\u7684\u6570\u7ec4\n  tasks.value = newTasks \/\/ \u66ff\u6362\u539f\u6570\u7ec4\uff0c\u89e6\u53d1\u66f4\u65b0\n}<\/pre>\n<\/li>\n
                      • \n
                        \u65b9\u6cd53\uff1a\u7ed9\u6570\u7ec4\u5143\u7d20\u52a0\u54cd\u5e94\u5f0f\uff08\u8fdb\u9636\uff09<\/strong>
                        \n\u5982\u679c\u6570\u7ec4\u91cc\u7684\u5143\u7d20\u662f\u666e\u901a\u5bf9\u8c61\uff0cVue\u9ed8\u8ba4\u4f1a\u628a\u5b83\u4eec\u8f6c\u4e3a\u54cd\u5e94\u5f0f\u5bf9\u8c61\uff0c\u6240\u4ee5\u53ea\u8981\u6570\u7ec4\u672c\u8eab\u7684\u66f4\u65b0\u89e6\u53d1\u4e86\uff0c\u5143\u7d20\u5c5e\u6027\u7684\u4fee\u6539\u4f1a\u81ea\u52a8\u540c\u6b65\uff0c\u6bd4\u5982\u5148\u786e\u4fdd\u6570\u7ec4\u662f\u54cd\u5e94\u5f0f\u7684\uff0c\u518d\u7528markRaw<\/code>\u8df3\u8fc7\u90e8\u5206\u4f18\u5316\uff08\u4f46\u4e00\u822c\u573a\u666f\u7528\u524d\u4e24\u79cd\u65b9\u6cd5\u66f4\u7b80\u5355\uff09\u3002  <\/p>\n<\/li>\n<\/ul>\n
                        defineModel \u5904\u7406\u6570\u7ec4\u548c\u666e\u901a\u53d8\u91cf\u6709\u5565\u533a\u522b\uff1f<\/h2>\n
                        \u666e\u901a\u53d8\u91cf\uff08\u5982\u5b57\u7b26\u4e32\u3001\u6570\u5b57\uff09\u662f\u503c\u7c7b\u578b<\/strong>\uff0c\u4fee\u6539\u65f6\u76f4\u63a5\u8d4b\u503cxxx.value = \u65b0\u503c<\/code>\u5c31\u80fd\u89e6\u53d1\u66f4\u65b0\uff0c\u4f46\u6570\u7ec4\u662f\u5f15\u7528\u7c7b\u578b<\/strong>\uff0cVue\u5bf9\u5b83\u7684\u54cd\u5e94\u5f0f\u5904\u7406\u66f4\u201c\u7279\u6b8a\u201d\uff1a  <\/p>\n\n\n\n\n\n\n\n
                        \u5bf9\u6bd4\u9879<\/th>\n\u666e\u901a\u53d8\u91cf\uff08\u503c\u7c7b\u578b\uff09<\/th>\n\u6570\u7ec4\uff08\u5f15\u7528\u7c7b\u578b\uff09<\/th>\n<\/tr>\n<\/thead>\n
                        \u66f4\u65b0\u89e6\u53d1\u6761\u4ef6<\/td>\n\u76f4\u63a5\u8d4b\u503cxxx.value = \u65b0\u503c<\/code><\/td>\n\u9700\u8c03\u7528\u53d8\u5f02\u65b9\u6cd5\uff08\u5982push\uff09\u6216\u66ff\u6362\u6570\u7ec4\u5f15\u7528<\/td>\n<\/tr>\n
                        \u54cd\u5e94\u5f0f\u52ab\u6301\u8303\u56f4<\/td>\n\u6574\u4e2a\u53d8\u91cf\u7684\u201c\u503c\u201d\u53d8\u5316<\/td>\n\u4ec5\u52ab\u63017\u4e2a\u53d8\u5f02\u65b9\u6cd5\uff0c\u7d22\u5f15\u8d4b\u503c\u4e0d\u52ab\u6301<\/td>\n<\/tr>\n
                        \u5b50\u7ec4\u4ef6\u4fee\u6539\u5f71\u54cd<\/td>\n\u6539\u503c\u5373\u89e6\u53d1\u7236\u7ec4\u4ef6\u540c\u6b65<\/td>\n\u9700\u7279\u6b8a\u64cd\u4f5c\uff08\u5982splice\u3001\u66ff\u6362\u6570\u7ec4\uff09\u89e6\u53d1\u540c\u6b65<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
                        \u7b80\u5355\u8bf4\uff1a\u6570\u7ec4\u56e0\u4e3a\u662f\u5f15\u7528\u7c7b\u578b\uff0c\u4fee\u6539\u5185\u90e8\u5143\u7d20\u65f6Vue\u201c\u770b\u4e0d\u89c1\u201d\uff0c\u5fc5\u987b\u901a\u8fc7\u7279\u6b8a\u624b\u6bb5\u8ba9\u5b83\u201c\u770b\u89c1\u201d\u53d8\u5316\uff5e  <\/p>\n
                        \u5b9e\u6218\uff1a\u7528 defineModel \u505a\u53ef\u7f16\u8f91\u7684 todo \u5217\u8868\uff0c\u6570\u7ec4\u600e\u4e48\u73a9\uff1f<\/h2>\n
                        \u7ed3\u5408\u771f\u5b9e\u573a\u666f\uff08todo\u5217\u8868\u53cc\u5411\u540c\u6b65\uff09\uff0c\u770bdefineModel<\/code>\u5904\u7406\u6570\u7ec4\u7684\u5b8c\u6574\u6d41\u7a0b\uff0c\u9700\u6c42\uff1a\u7236\u7ec4\u4ef6\u4f20\u4efb\u52a1\u5217\u8868\uff0c\u5b50\u7ec4\u4ef6\u53ef\u52fe\u9009\u5b8c\u6210\u72b6\u6001\u3001\u65b0\u589e\u4efb\u52a1\uff0c\u6240\u6709\u4fee\u6539\u53cc\u5411\u540c\u6b65\u3002  <\/p>\n
                        \u7236\u7ec4\u4ef6\uff08Parent.vue\uff09\uff1a\u4f20\u6570\u7ec4+\u53cc\u5411\u7ed1\u5b9a<\/h3>\n
                        <template>\n  <h3>\u7236\u7ec4\u4ef6\u4efb\u52a1\u5217\u8868<\/h3>\n  <ul>\n    <li v-for="task in parentTasks" :key="task.id">\n      {{ task.text }} \u2014\u2014 {{ task.done ? '\u5df2\u5b8c\u6210' : '\u672a\u5b8c\u6210' }}\n    <\/li>\n  <\/ul>\n  <!-- \u7528v-model:tasks\u7ed1\u5b9a\u5b50\u7ec4\u4ef6 -->\n  <TodoList v-model:tasks="parentTasks" \/>\n  <button @click="parentAddTask">\u7236\u7ec4\u4ef6\u65b0\u589e\u4efb\u52a1<\/button>\n<\/template>\n<script setup>\nimport { ref } from 'vue'\nimport TodoList from '.\/TodoList.vue'\nconst parentTasks = ref([\n  { id: 1, text: '\u5b66\u4e60Vue', done: false },\n  { id: 2, text: '\u5199\u6587\u7ae0', done: false }\n])\n\/\/ \u7236\u7ec4\u4ef6\u81ea\u5df1\u65b0\u589e\u4efb\u52a1\uff08\u6d4b\u8bd5\u53cc\u5411\u540c\u6b65\uff09\nfunction parentAddTask() {\n  parentTasks.value.push({ id: Date.now(), text: '\u7236\u7ec4\u4ef6\u65b0\u589e\u4efb\u52a1', done: false })\n}\n<\/script><\/pre>\n
                        \u5b50\u7ec4\u4ef6\uff08TodoList.vue\uff09\uff1adefineModel+\u5904\u7406\u6570\u7ec4\u66f4\u65b0<\/h3>\n
                        <template>\n  <h4>\u5b50\u7ec4\u4ef6\u53ef\u7f16\u8f91\u5217\u8868<\/h4>\n  <div v-for="(task, index) in tasks" :key="task.id">\n    <!-- \u52fe\u9009\u6846\u53cc\u5411\u7ed1\u5b9a\u4efb\u52a1\u72b6\u6001 -->\n    <input type="checkbox" :checked="task.done" @change="toggleDone(index)" \/>\n    <span>{{ task.text }}<\/span>\n  <\/div>\n  <input v-model="newTaskText" placeholder="\u8f93\u5165\u65b0\u4efb\u52a1" \/>\n  <button @click="childAddTask">\u5b50\u7ec4\u4ef6\u65b0\u589e\u4efb\u52a1<\/button>\n<\/template>\n<script setup>\nimport { ref } from 'vue'\n\/\/ \u58f0\u660e\u53cc\u5411\u7ed1\u5b9a\u7684tasks\u6570\u7ec4\nconst tasks = defineModel('tasks') \nconst newTaskText = ref('')\n\/\/ \u5207\u6362\u4efb\u52a1\u5b8c\u6210\u72b6\u6001\uff08\u9700\u89e6\u53d1\u6570\u7ec4\u66f4\u65b0\uff09\nfunction toggleDone(index) {\n  \/\/ \u65b9\u6cd51\uff1a\u66ff\u6362\u6574\u4e2a\u6570\u7ec4\n  const newTasks = [...tasks.value]\n  newTasks[index].done = !newTasks[index].done\n  tasks.value = newTasks \/\/ \u66ff\u6362\u6570\u7ec4\uff0c\u89e6\u53d1\u7236\u7ec4\u4ef6\u540c\u6b65\n}\n\/\/ \u5b50\u7ec4\u4ef6\u65b0\u589e\u4efb\u52a1\uff08\u7528push\u53d8\u5f02\u65b9\u6cd5\uff09\nfunction childAddTask() {\n  if (newTaskText.value) {\n    tasks.value.push({ \n      id: Date.now(), \n      text: newTaskText.value, \n      done: false \n    })\n    newTaskText.value = ''\n  }\n}\n<\/script><\/pre>\n
                        \u6548\u679c\u8bf4\u660e\uff1a<\/h3>\n
                          \n
                        • \u5b50\u7ec4\u4ef6\u70b9\u201c\u52fe\u9009\u6846\u201d\uff0c\u901a\u8fc7\u66ff\u6362\u6570\u7ec4<\/strong>\u89e6\u53d1\u66f4\u65b0\uff0c\u7236\u7ec4\u4ef6\u4efb\u52a1\u72b6\u6001\u540c\u6b65\u53d8\u5316\uff1b  <\/li>\n
                        • \u5b50\u7ec4\u4ef6\u70b9\u201c\u65b0\u589e\u4efb\u52a1\u201d\uff0c\u901a\u8fc7push\u53d8\u5f02\u65b9\u6cd5<\/strong>\u89e6\u53d1\u66f4\u65b0\uff0c\u7236\u7ec4\u4ef6\u4efb\u52a1\u5217\u8868\u540c\u6b65\u65b0\u589e\uff1b  <\/li>\n
                        • \u7236\u7ec4\u4ef6\u70b9\u201c\u7236\u7ec4\u4ef6\u65b0\u589e\u4efb\u52a1\u201d\uff0c\u6570\u7ec4\u53d8\u5316\u540e\u5b50\u7ec4\u4ef6\u4e5f\u4f1a\u540c\u6b65\u6e32\u67d3\u65b0\u4efb\u52a1\uff08\u56e0\u4e3adefineModel<\/code>\u662f\u53cc\u5411\u7ed1\u5b9a\uff09\u3002  <\/li>\n<\/ul>\n
                          \u751f\u4ea7\u73af\u5883\u7528 defineModel \u5904\u7406\u6570\u7ec4\u8981\u907f\u54ea\u4e9b\u5751\uff1f<\/h2>\n
                          \u5b9e\u9645\u9879\u76ee\u91cc\uff0c\u8fd9\u4e9b\u7ec6\u8282\u6ca1\u6ce8\u610f\u5bb9\u6613\u8e29\u96f7\uff0c\u63d0\u524d\u907f\u5751\u80fd\u7701\u5f88\u591a\u8c03\u8bd5\u65f6\u95f4\uff1a  <\/p>\n
                          \u57511\uff1a\u76f4\u63a5\u4fee\u6539\u6570\u7ec4\u5143\u7d20\u5c5e\u6027\uff0c\u7236\u7ec4\u4ef6\u4e0d\u540c\u6b65<\/h3>\n
                          \u6bd4\u5982tasks.value[0].done = true<\/code>\uff0c\u770b\u7740\u6539\u4e86\u4f46\u7236\u7ec4\u4ef6\u6ca1\u53cd\u5e94\u3002\u89e3\u51b3\uff1a<\/strong> \u7528splice<\/code>\u6216\u66ff\u6362\u6570\u7ec4\u7684\u65b9\u5f0f\u4fee\u6539\u3002  <\/p>\n
                          \u57512\uff1a\u9891\u7e41\u66ff\u6362\u5927\u6570\u7ec4\u5bfc\u81f4\u6027\u80fd\u5dee<\/h3>\n
                          \u5982\u679c\u6570\u7ec4\u5f88\u5927\uff08\u6bd4\u5982\u51e0\u767e\u6761\u6570\u636e\uff09\uff0c\u6bcf\u6b21\u4fee\u6539\u90fdtasks.value = [...newArr]<\/code>\u4f1a\u9891\u7e41\u521b\u5efa\u65b0\u6570\u7ec4\uff0c\u5f71\u54cd\u6027\u80fd\u3002\u89e3\u51b3\uff1a<\/strong> \u4f18\u5148\u7528splice<\/code>\u7b49\u5c40\u90e8\u4fee\u6539\u65b9\u6cd5\uff0c\u51cf\u5c11\u6570\u7ec4\u6574\u4f53\u66ff\u6362\u3002  <\/p>\n
                          \u57513\uff1a\u7236\u7ec4\u4ef6\u4f20\u975e\u54cd\u5e94\u5f0f\u6570\u7ec4<\/h3>\n
                          \u5982\u679c\u7236\u7ec4\u4ef6\u4f20\u7684\u6570\u7ec4\u662f\u7528markRaw<\/code>\u521b\u5efa\u7684\u975e\u54cd\u5e94\u5f0f\u6570\u7ec4\uff0cdefineModel<\/code>\u65e0\u6cd5\u5b9e\u73b0\u53cc\u5411\u7ed1\u5b9a\u3002\u89e3\u51b3\uff1a<\/strong> \u7236\u7ec4\u4ef6\u786e\u4fdd\u6570\u7ec4\u662f\u54cd\u5e94\u5f0f\u7684\uff08\u7528ref<\/code>\u6216reactive<\/code>\u5305\u88f9\u666e\u901a\u6570\u7ec4\uff09\u3002  <\/p>\n
                          \u57514\uff1a\u6570\u7ec4\u5143\u7d20\u662f\u590d\u6742\u5bf9\u8c61\uff0c\u4fee\u6539\u6df1\u5c42\u5c5e\u6027\u6ca1\u53cd\u5e94<\/h3>\n
                          \u6bd4\u5982\u6570\u7ec4\u91cc\u7684\u5bf9\u8c61\u6709\u5d4c\u5957\u7ed3\u6784\uff08task.info.name<\/code>\uff09\uff0c\u76f4\u63a5\u6539task.info.name<\/code>\u53ef\u80fd\u4e0d\u89e6\u53d1\u66f4\u65b0\u3002\u89e3\u51b3\uff1a<\/strong> \u7528deepClone<\/code>\u590d\u5236\u5bf9\u8c61\u540e\u4fee\u6539\uff0c\u6216\u7528reactive<\/code>\u5305\u88f9\u5d4c\u5957\u5bf9\u8c61\uff08\u786e\u4fdd\u6df1\u5c42\u54cd\u5e94\u5f0f\uff09\u3002  <\/p>\n
                          \u539f\u7406\u5ef6\u4f38\uff1aVue\u4e3a\u5565\u5bf9\u6570\u7ec4\u201c\u7279\u6b8a\u5bf9\u5f85\u201d\uff1f<\/h2>\n
                          Vue\u7684\u54cd\u5e94\u5f0f\u7cfb\u7edf\u57fa\u4e8eObject.defineProperty<\/code>\uff08\u6216Proxy\uff09\uff0c\u4f46\u6570\u7ec4\u7684\u7d22\u5f15\u8d4b\u503c\u3001\u957f\u5ea6\u4fee\u6539\u65e0\u6cd5\u88ab\u9ed8\u8ba4\u52ab\u6301\uff08\u56e0\u4e3a\u6570\u7ec4\u957f\u5ea6\u53ef\u80fd\u5f88\u5927\uff0c\u5168\u52ab\u6301\u7d22\u5f15\u6027\u80fd\u592a\u4f4e\uff09\uff0c\u6240\u4ee5Vue\u56e2\u961f\u9009\u62e9\u53ea\u52ab\u63017\u4e2a\u53d8\u5f02\u65b9\u6cd5<\/strong>\uff0c\u8ba9\u8fd9\u4e9b\u65b9\u6cd5\u8c03\u7528\u65f6\u89e6\u53d1\u66f4\u65b0\u3002  <\/p>\n
                          \u800cdefineModel<\/code>\u672c\u8d28\u662f\u5e2e\u6211\u4eec\u81ea\u52a8\u5904\u7406props<\/code>\u548cemit<\/code>\uff0c\u6240\u4ee5\u5b50\u7ec4\u4ef6\u4fee\u6539\u6570\u7ec4\u65f6\uff0c\u5fc5\u987b\u901a\u8fc7Vue\u80fd\u68c0\u6d4b\u5230\u7684\u201c\u6570\u7ec4\u53d8\u5316\u201d\uff08\u53d8\u5f02\u65b9\u6cd5\u3001\u66ff\u6362\u6570\u7ec4\uff09\uff0c\u624d\u80fd\u8ba9emit<\/code>\u89e6\u53d1\uff0c\u7236\u7ec4\u4ef6\u540c\u6b65\u66f4\u65b0\u3002  <\/p>\n
                          defineModel\u5904\u7406\u6570\u7ec4\u7684\u6838\u5fc3\u903b\u8f91<\/h2>\n
                          \u7528defineModel<\/code>\u5b9e\u73b0\u6570\u7ec4\u53cc\u5411\u7ed1\u5b9a\uff0c\u5173\u952e\u662f\u8ba9Vue\u68c0\u6d4b\u5230\u6570\u7ec4\u7684\u53d8\u5316<\/strong>\uff1a\u8981\u4e48\u8c03\u7528\u53d8\u5f02\u65b9\u6cd5\uff08push\/pop\u7b49\uff09\uff0c\u8981\u4e48\u66ff\u6362\u6574\u4e2a\u6570\u7ec4\uff0c\u540c\u65f6\u907f\u5f00\u201c\u76f4\u63a5\u6539\u5143\u7d20\u5c5e\u6027\/\u7d22\u5f15\u201d\u7684\u5751\uff0c\u7ed3\u5408\u5b9e\u6218\u573a\u666f\uff08\u5982todo\u5217\u8868\uff09\u7406\u89e3\u53cc\u5411\u540c\u6b65\u7684\u6d41\u7a0b\uff0c\u751f\u4ea7\u73af\u5883\u6ce8\u610f\u6027\u80fd\u548c\u54cd\u5e94\u5f0f\u8fb9\u754c\u95ee\u9898\u3002  <\/p>\n
                          \u4e0b\u6b21\u518d\u78b0\u5230\u201c\u6570\u7ec4\u53cc\u5411\u7ed1\u5b9a\u4e0d\u540c\u6b65\u201d\u7684\u95ee\u9898\uff0c\u5148\u68c0\u67e5\u662f\u4e0d\u662f\u4fee\u6539\u65b9\u5f0f\u4e0d\u5bf9\uff5e \u628a\u8fd9\u4e9b\u7ec6\u8282\u5403\u900f\uff0c\u7528defineModel<\/code>\u5904\u7406\u6570\u7ec4\u5c31\u7a33\u4e86\uff01  <\/p>\n
                          \uff08\u5982\u679c\u5bf9\u4f60\u6709\u5e2e\u52a9\uff0c\u70b9\u8d5e+\u6536\u85cf\u9f13\u52b1\u4e00\u4e0b\u5440\uff5e \u6709\u7591\u95ee\u8bc4\u8bba\u533a\u89c1\uff5e\uff09<\/p>","pubDate":"Mon, 30 Mar 2026 14:03:48 +0800"},{"title":"Vue3\u4e2ddefineModel\u7684set\u548b\u7528\uff1f\u53cc\u5411\u7ed1\u5b9a\u903b\u8f91\u5f97\u8fd9\u4e48\u5904\u7406","link":"https:\/\/codeqd.com\/post\/20260321717.html","description":"
                          defineModel\u662fVue3\u7684\u5565\u65b0\u7279\u6027\uff1f<\/h2>\n
                          Vue3.4\u7248\u672c\u540e\u65b0\u589e\u7684defineModel<\/code>\uff0c\u662f\u7ed9\u7ec4\u4ef6\u53cc\u5411\u7ed1\u5b9a<\/strong>\u505a\u7684\u8bed\u6cd5\u7cd6\uff0c\u4ee5\u524d\u5199\u5b50\u7ec4\u4ef6\u652f\u6301v-model\uff0c\u5f97\u624b\u52a8\u5199defineProps<\/code>\u63a5\u6536modelValue<\/code>\uff0c\u518d\u7528defineEmits<\/code>\u89e6\u53d1update:modelValue<\/code>\u4e8b\u4ef6\uff0c\u73b0\u5728\u7528defineModel<\/code>\uff0c\u4e00\u884c\u4ee3\u7801\u80fd\u540c\u65f6\u5904\u7406\u201c\u63a5\u6536\u7236\u7ec4\u4ef6\u503c\u201d\u548c\u201c\u901a\u77e5\u7236\u7ec4\u4ef6\u66f4\u65b0\u201d\uff0c\u8fd4\u56de\u7684\u6570\u7ec4\u91cc\u7b2c\u4e00\u4e2a\u662f\u5f53\u524d\u503c\uff0c\u7b2c\u4e8c\u4e2a\u5c31\u662fset<\/code>\u51fd\u6570\u3002  <\/p>\n
                          \u4e3e\u4e2a\u6700\u7b80\u4f8b\u5b50\uff1a
                          \n\u7236\u7ec4\u4ef6\u7528<ChildComponent v-model=\"parentVal\" \/><\/code>\uff0c\u5b50\u7ec4\u4ef6\u91cc\uff1a  <\/p>\n
                          <script setup>  \nconst [modelValue, setModelValue] = defineModel()  \n\/\/ modelValue \u662f\u7236\u7ec4\u4ef6\u4f20\u7684parentVal\u5f53\u524d\u503c  \n\/\/ setModelValue \u662f\u7528\u6765\u901a\u77e5\u7236\u7ec4\u4ef6\u66f4\u65b0parentVal\u7684\u51fd\u6570  \n<\/script>  <\/pre>\n
                          defineModel\u91cc\u7684set\u51fd\u6570\uff0c\u6838\u5fc3\u4f5c\u7528\u662f\u5565\uff1f<\/h2>\n
                          set<\/code>\u51fd\u6570\u662f\u5b50\u7ec4\u4ef6\u4e3b\u52a8\u4fee\u6539\u7236\u7ec4\u4ef6\u7ed1\u5b9a\u503c\u7684\u201c\u5f00\u5173\u201d<\/strong>\uff0c\u56e0\u4e3aVue\u7684\u5355\u5411\u6570\u636e\u6d41\u89c4\u5219\uff0c\u5b50\u7ec4\u4ef6\u4e0d\u80fd\u76f4\u63a5\u6539\u7236\u7ec4\u4ef6\u4f20\u7684props\uff08\u867d\u7136Vue3\u5141\u8bb8props\u53ef\u53d8\uff0c\u4f46\u7236\u7ec4\u4ef6\u4e0d\u4f1a\u540c\u6b65\u66f4\u65b0\uff09\uff0c\u6240\u4ee5\u5f97\u901a\u8fc7set<\/code>\u89e6\u53d1\u4e00\u4e2a\u66f4\u65b0\u4e8b\u4ef6\uff0c\u8ba9\u7236\u7ec4\u4ef6\u81ea\u5df1\u6539\u503c\uff0c\u518d\u628a\u65b0\u503c\u4f20\u7ed9\u5b50\u7ec4\u4ef6\u3002  <\/p>\n
                          \u7b80\u5355\u8bf4\uff1a\u5b50\u7ec4\u4ef6\u91cc\u8c03\u7528set(\u65b0\u503c)<\/code>\uff0c\u7236\u7ec4\u4ef6\u7684v-model\u7ed1\u5b9a\u503c\u4f1a\u81ea\u52a8\u66f4\u65b0\uff0c\u540c\u65f6\u5b50\u7ec4\u4ef6\u91cc\u7684modelValue<\/code>\u4e5f\u4f1a\u540c\u6b65\u53d8\u6210\u65b0\u503c\u3002  <\/p>\n
                          \u548b\u5728\u7ec4\u4ef6\u91cc\u7528set\u4fee\u6539\u7236\u7ec4\u4ef6\u7684\u503c\uff1f\u4e3e\u4e2a\u5b9e\u9645\u573a\u666f<\/h2>\n
                          \u6700\u5e38\u89c1\u7684\u662f\u81ea\u5b9a\u4e49\u8868\u5355\u7ec4\u4ef6<\/strong>\uff0c\u6bd4\u5982\u5c01\u88c5\u4e00\u4e2a\u5e26\u683c\u5f0f\u5904\u7406\u7684\u8f93\u5165\u6846\u3002  <\/p>\n
                          \u7236\u7ec4\u4ef6\u7528\u6cd5\uff1a  <\/p>\n
                          <template>  \n  <CustomInput v-model="username" \/>  \n  <p>\u7236\u7ec4\u4ef6\u7684username\uff1a{{ username }}<\/p>  \n<\/template>  \n<script setup>  \nimport { ref } from 'vue'  \nconst username = ref('')  \n<\/script>  <\/pre>\n
                          \u5b50\u7ec4\u4ef6CustomInput.vue<\/code>\u5b9e\u73b0\uff1a  <\/p>\n
                          <template>  \n  <input  \n    :value="modelValue"  \n    @input="handleInput"  \n    placeholder="\u8bf7\u8f93\u5165\u7528\u6237\u540d"  \n  \/>  \n<\/template>  \n<script setup>  \nconst [modelValue, setModelValue] = defineModel()  \nfunction handleInput(e) {  \n  const inputVal = e.target.value  \n  \/\/ \u5047\u8bbe\u8981\u505a\u683c\u5f0f\u5904\u7406\uff1a\u9996\u5b57\u6bcd\u5927\u5199  \n  const formatted = inputVal.replace(\/^.\/, (match) => match.toUpperCase())  \n  \/\/ \u8c03\u7528set\uff0c\u628a\u5904\u7406\u540e\u7684\u503c\u4f20\u7ed9\u7236\u7ec4\u4ef6  \n  setModelValue(formatted)  \n}  \n<\/script>  <\/pre>\n
                          \u8fd9\u91cc\u5173\u952e\u662f\uff1a\u8f93\u5165\u4e8b\u4ef6\u91cc\u62ff\u5230\u7528\u6237\u8f93\u5165\uff0c\u5904\u7406\u540e\u7528setModelValue(\u65b0\u503c)<\/code>\uff0c\u7236\u7ec4\u4ef6\u7684username<\/code>\u5c31\u4f1a\u8ddf\u7740\u53d8\uff0c\u5982\u679c\u76f4\u63a5\u6539modelValue.value = \u65b0\u503c<\/code>\uff0c\u7236\u7ec4\u4ef6\u5b8c\u5168\u6ca1\u53cd\u5e94\u2014\u2014\u56e0\u4e3a\u6ca1\u89e6\u53d1\u66f4\u65b0\u4e8b\u4ef6\uff0c\u8fd9\u5c31\u662fset<\/code>\u7684\u5fc5\u8981\u6027\u3002  <\/p>\n
                          \u76f4\u63a5\u6539modelValue\u548c\u8c03\u7528set\uff0c\u533a\u522b\u5728\u54ea\uff1f<\/h2>\n
                          \u770b\u8fd9\u6bb5\u5bf9\u6bd4\u4ee3\u7801\u5c31\u61c2\u4e86\uff1a  <\/p>\n
                          <script setup>  \nconst [modelValue, setModelValue] = defineModel()  \n\/\/ \u9519\u8bef\u793a\u8303\uff1a\u76f4\u63a5\u6539modelValue\uff0c\u7236\u7ec4\u4ef6\u4e0d\u66f4\u65b0  \nfunction wrongUpdate() {  \n  modelValue.value = '\u76f4\u63a5\u4fee\u6539'  \n}  \n\/\/ \u6b63\u786e\u793a\u8303\uff1a\u8c03\u7528set\uff0c\u7236\u7ec4\u4ef6\u4f1a\u66f4\u65b0  \nfunction rightUpdate() {  \n  setModelValue('\u901a\u8fc7set\u4fee\u6539')  \n}  \n<\/script>  <\/pre>\n
                          \u539f\u7406\u662f\uff1amodelValue<\/code>\u53ea\u662f\u201c\u5f53\u524d\u503c\u7684\u5f15\u7528\u201d\uff0c\u548c\u7236\u7ec4\u4ef6\u7684\u7ed1\u5b9a\u503c\u662f\u5355\u5411\u540c\u6b65<\/strong>\uff08\u7236\u7ec4\u4ef6\u6539\u4e86\u5b50\u7ec4\u4ef6\u4f1a\u53d8\uff0c\u4f46\u5b50\u7ec4\u4ef6\u76f4\u63a5\u6539\u4e0d\u4f1a\u901a\u77e5\u7236\u7ec4\u4ef6\uff09\uff0c\u800cset<\/code>\u5185\u90e8\u505a\u4e86\u4e24\u4ef6\u4e8b\uff1a  <\/p>\n
                            \n
                          1. \u89e6\u53d1update:modelValue<\/code>\u4e8b\u4ef6\uff0c\u628a\u65b0\u503c\u4f20\u7ed9\u7236\u7ec4\u4ef6\uff1b  <\/li>\n
                          2. \u8ba9\u5b50\u7ec4\u4ef6\u5185\u90e8\u7684modelValue<\/code>\u540c\u6b65\u53d8\u6210\u65b0\u503c\uff08\u56e0\u4e3a\u7236\u7ec4\u4ef6\u66f4\u65b0\u540e\u4f1a\u91cd\u65b0\u4f20\u503c\u7ed9\u5b50\u7ec4\u4ef6\uff09\u3002  <\/li>\n<\/ol>\n
                            \u591a\u4e2av-model\u7ed1\u5b9a\uff0cset\u548b\u5904\u7406\uff1f<\/h2>\n
                            \u5982\u679c\u7236\u7ec4\u4ef6\u7528\u4e86\u591a\u4e2av-model\uff08\u6bd4\u5982<Child v-model:foo=\"a\" v-model:bar=\"b\" \/><\/code>\uff09\uff0c\u5b50\u7ec4\u4ef6\u91cc\u8981\u7ed9defineModel<\/code>\u4f20\u6570\u7ec4\u6307\u5b9a\u540d\u79f0\uff1a  <\/p>\n
                            \u5b50\u7ec4\u4ef6\u4ee3\u7801\uff1a  <\/p>\n
                            <script setup>  \nconst [foo, setFoo] = defineModel('foo')  \nconst [bar, setBar] = defineModel('bar')  \nfunction updateFoo() {  \n  setFoo('\u65b0\u7684foo\u503c') \/\/ \u89e6\u53d1\u7236\u7ec4\u4ef6a\u7684\u66f4\u65b0  \n}  \nfunction updateBar() {  \n  setBar('\u65b0\u7684bar\u503c') \/\/ \u89e6\u53d1\u7236\u7ec4\u4ef6b\u7684\u66f4\u65b0  \n}  \n<\/script>  <\/pre>\n
                            \u6bcf\u4e2adefineModel(\u540d\u79f0)<\/code>\u4f1a\u8fd4\u56de\u5bf9\u5e94\u540d\u79f0\u7684\u201c\u503c+set\u51fd\u6570\u201d\uff0c\u8c03\u7528\u5bf9\u5e94\u7684set\u5c31\u53ea\u66f4\u65b0\u5bf9\u5e94\u7236\u7ec4\u4ef6\u7684\u7ed1\u5b9a\u503c\uff0c\u903b\u8f91\u5f88\u6e05\u6670\u3002  <\/p>\n
                            \u548c\u4f20\u7edfv-model\u5b9e\u73b0\u6bd4\uff0cset\u4f18\u52bf\u5728\u54ea\uff1f<\/h2>\n
                            \u4f20\u7edf\u5199\u6cd5\uff08Vue3.4\u524d\uff09\u5f97\u624b\u52a8\u5199props\u548cemit\uff0c\u4ee3\u7801\u5197\u4f59\uff1a  <\/p>\n
                            <script setup>  \nconst props = defineProps(['modelValue'])  \nconst emit = defineEmits(['update:modelValue'])  \nfunction handleChange(newVal) {  \n  emit('update:modelValue', newVal) \/\/ \u624b\u52a8\u89e6\u53d1\u4e8b\u4ef6  \n}  \n<\/script>  <\/pre>\n
                            \u7528defineModel<\/code>\u540e\uff0cprops\u3001emit\u3001set\u51fd\u6570\u5168\u88ab\u81ea\u52a8\u5904\u7406<\/strong>\uff0c\u4ee3\u7801\u91cf\u5c11\u4e00\u534a\uff0c\u8fd8\u907f\u514d\u4e86\u201c\u5fd8\u8bb0\u5199emit\u5bfc\u81f4\u66f4\u65b0\u5931\u8d25\u201d\u7684 Bug\uff0c\u800c\u4e14set<\/code>\u628a\u201c\u89e6\u53d1\u66f4\u65b0\u201d\u7684\u903b\u8f91\u5c01\u88c5\u6210\u51fd\u6570\uff0c\u53ef\u8bfb\u6027\u66f4\u5f3a\u2014\u2014\u770bsetModelValue(xxx)<\/code>\u5c31\u77e5\u9053\u8fd9\u662f\u8981\u6539\u7236\u7ec4\u4ef6\u7684\u503c\uff0c\u4e0d\u7528\u518d\u7ffb\u627eemit\u7684\u903b\u8f91\u3002  <\/p>\n
                            \u7528set\u65f6\u5bb9\u6613\u8e29\u76843\u4e2a\u5751\uff0c\u548b\u907f\uff1f<\/h2>\n
                              \n
                            1. \n
                              \u5fd8\u8bb0\u8c03\u7528set\uff0c\u76f4\u63a5\u6539modelValue<\/strong>
                              \n\u65b0\u624b\u5e38\u72af\uff1a\u4ee5\u4e3amodelValue<\/code>\u662f\u54cd\u5e94\u5f0f\u7684\uff0c\u6539\u4e86\u5c31\u751f\u6548\uff0c\u5b50\u7ec4\u4ef6\u6539\u7236\u7ec4\u4ef6\u503c\u5fc5\u987b\u8d70set<\/strong>\uff0c\u76f4\u63a5\u6539\u53ea\u6709\u81ea\u5df1\u80fd\u770b\u5230\uff0c\u7236\u7ec4\u4ef6\u5b8c\u5168\u6ca1\u53d8\u5316\u3002  <\/p>\n<\/li>\n
                            2. \n
                              set\u7684\u53c2\u6570\u7c7b\u578b\u548c\u7236\u7ec4\u4ef6\u7ed1\u5b9a\u503c\u4e0d\u5339\u914d<\/strong>
                              \n\u6bd4\u5982\u7236\u7ec4\u4ef6\u7ed1\u7684\u662f\u6570\u5b57v-model=\"age\"<\/code>\uff08age\u662fnumber\uff09\uff0c\u5b50\u7ec4\u4ef6set\u7684\u65f6\u5019\u4f20\u4e86\u5b57\u7b26\u4e32setModelValue('18')<\/code>\uff0c\u7236\u7ec4\u4ef6\u7684age\u4f1a\u53d8\u6210\u5b57\u7b26\u4e32\uff0c\u53ef\u80fd\u5bfc\u81f4\u540e\u7eed\u903b\u8f91\u62a5\u9519\uff0c\u8981\u4fdd\u8bc1set\u7684\u53c2\u6570\u7c7b\u578b\u548c\u7236\u7ec4\u4ef6\u7ed1\u5b9a\u503c\u4e00\u81f4\u3002  <\/p>\n<\/li>\n
                            3. \n
                              \u5f02\u6b65\u64cd\u4f5c\u4e2d\u8c03\u7528set\uff0c\u65f6\u673a\u4e0d\u5bf9<\/strong>
                              \n\u6bd4\u5982\u5728setTimeout<\/code>\u91cc\u8c03\u7528set\uff0c\u8981\u786e\u4fdd\u7ec4\u4ef6\u8fd8\u6ca1\u88ab\u5378\u8f7d\uff0c\u53ef\u4ee5\u7528onBeforeUnmount<\/code>\u6e05\u7406\u5b9a\u65f6\u5668\uff0c\u6216\u8005\u7528watch<\/code>\u76d1\u542c\u5f02\u6b65\u7ed3\u679c\u518d\u8c03\u7528set\u3002  <\/p>\n<\/li>\n<\/ol>\n
                              \u7ed3\u5408computed\u6216watch\u7528set\uff0c\u548b\u73a9\uff1f<\/h2>\n
                              \u573a\u666f1\uff1a\u7ed9modelValue\u52a0\u201c\u8bfb\u5199\u903b\u8f91\u201d<\/strong>
                              \n\u6bd4\u5982\u7236\u7ec4\u4ef6\u4f20\u7684\u662f\u539f\u59cb\u503c\uff0c\u5b50\u7ec4\u4ef6\u8981\u505a\u683c\u5f0f\u5316\uff0c\u540c\u65f6\u4fee\u6539\u65f6\u8981\u8fd8\u539f\u683c\u5f0f\uff0c\u7528computed\u5c01\u88c5\uff1a  <\/p>\n
                              <script setup>  \nconst [modelValue, setModelValue] = defineModel()  \n\/\/ \u5047\u8bbe\u7236\u7ec4\u4ef6\u4f20\u7684\u662f\u201c2024-10-01\u201d\uff0c\u5b50\u7ec4\u4ef6\u663e\u793a\u201c2024\/10\/01\u201d\uff0c\u4fee\u6539\u540e\u518d\u8f6c\u6210\u201c-\u201d\u683c\u5f0f  \nconst formattedDate = computed({  \n  get() {  \n    return modelValue.replace(\/-\/g, '\/')  \n  },  \n  set(newVal) {  \n    const rawVal = newVal.replace(\/\\\/\/g, '-')  \n    setModelValue(rawVal) \/\/ \u8f6c\u6210\u7236\u7ec4\u4ef6\u9700\u8981\u7684\u683c\u5f0f\uff0c\u518d\u8c03\u7528set  \n  }  \n})  \n<\/script>  \n<template>  \n  <input v-model="formattedDate" \/>  \n<\/template>  <\/pre>\n
                              \u573a\u666f2\uff1awatch\u76d1\u542cmodelValue\u53d8\u5316\uff0c\u518d\u8c03\u7528set\u505a\u8054\u52a8<\/strong>
                              \n\u6bd4\u5982\u5b50\u7ec4\u4ef6\u91cc\u6709\u4e24\u4e2a\u5173\u8054\u7684v-model\uff0c\u6539\u4e00\u4e2a\u8981\u540c\u6b65\u6539\u53e6\u4e00\u4e2a\uff1a  <\/p>\n
                              <script setup>  \nconst [foo, setFoo] = defineModel('foo')  \nconst [bar, setBar] = defineModel('bar')  \nwatch(foo, (newFoo) => {  \n  \/\/ \u5047\u8bbefoo\u548cbar\u6709\u6570\u5b66\u5173\u7cfb\uff1abar = foo * 2  \n  setBar(newFoo * 2)  \n})  \nwatch(bar, (newBar) => {  \n  setFoo(newBar \/ 2)  \n})  \n<\/script>  <\/pre>\n
                              \u8fd9\u91cc\u8981\u6ce8\u610f\u907f\u514d\u5faa\u73af\u66f4\u65b0<\/strong>\uff1a\u6bd4\u5982foo\u6539\u4e86\u89e6\u53d1bar\u6539\uff0cbar\u6539\u4e86\u53c8\u89e6\u53d1foo\u6539\uff0c\u4f1a\u65e0\u9650\u5faa\u73af\uff0c\u5b9e\u9645\u9879\u76ee\u91cc\u8981\u52a0\u6761\u4ef6\u5224\u65ad\uff0c\u53ea\u5728\u5fc5\u8981\u65f6\u66f4\u65b0\u3002  <\/p>\n
                              set\u5728\u7ec4\u5408\u5f0f\u51fd\u6570\u91cc\u548b\u590d\u7528\u903b\u8f91\uff1f<\/h2>\n
                              \u5f88\u591a\u7ec4\u4ef6\u6709\u76f8\u4f3c\u7684\u201c\u53cc\u5411\u7ed1\u5b9a+\u903b\u8f91\u5904\u7406\u201d\u9700\u6c42\uff0c\u8f93\u5165\u9a8c\u8bc1+\u683c\u5f0f\u5904\u7406\u201d\uff0c\u53ef\u4ee5\u628aset\u5c01\u88c5\u5230\u7ec4\u5408\u5f0f\u51fd\u6570\u91cc\uff1a  <\/p>\n
                              \/\/ useFormInput.js  \nexport function useFormInput(setFn) {  \n  const handleInput = (e) => {  \n    const val = e.target.value  \n    \/\/ \u901a\u7528\u903b\u8f91\uff1a\u53bb\u7a7a\u683c\u3001\u9a8c\u8bc1\u957f\u5ea6\u7b49  \n    const trimmed = val.trim()  \n    if (trimmed.length > 10) return \/\/ \u957f\u5ea6\u9650\u5236  \n    setFn(trimmed) \/\/ \u8c03\u7528\u7ec4\u4ef6\u91cc\u7684set\u51fd\u6570  \n  }  \n  return { handleInput }  \n}  <\/pre>\n
                              \u5b50\u7ec4\u4ef6\u91cc\u7528\uff1a  <\/p>\n
                              <script setup>  \nconst [modelValue, setModelValue] = defineModel()  \nconst { handleInput } = useFormInput(setModelValue) \/\/ \u628aset\u4f20\u7ed9\u7ec4\u5408\u5f0f\u51fd\u6570  \n<\/script>  \n<template>  \n  <input @input="handleInput" :value="modelValue" \/>  \n<\/template>  <\/pre>\n
                              \u8fd9\u6837\u903b\u8f91\u548c\u7ec4\u4ef6\u89e3\u8026<\/strong>\uff0c\u591a\u4e2a\u7ec4\u4ef6\u8981\u505a\u8f93\u5165\u9a8c\u8bc1\u65f6\uff0c\u76f4\u63a5\u590d\u7528useFormInput<\/code>\uff0c\u4f20\u5404\u81ea\u7684set\u51fd\u6570\u5c31\u884c\u3002  <\/p>\n
                              \u638c\u63e1set\uff0c\u8ba9\u53cc\u5411\u7ed1\u5b9a\u66f4\u4e1d\u6ed1<\/h2>\n
                              defineModel<\/code>\u7684set<\/code>\u51fd\u6570\uff0c\u672c\u8d28\u662fVue\u7ed9\u5b50\u7ec4\u4ef6\u201c\u5b89\u5168\u4fee\u6539\u7236\u7ec4\u4ef6\u503c\u201d\u7684\u5b98\u65b9\u89e3\u51b3\u65b9\u6848\u2014\u2014\u65e2\u9075\u5b88\u5355\u5411\u6570\u636e\u6d41\uff0c\u53c8\u7b80\u5316\u4e86\u4ee3\u7801\uff0c\u8bb0\u4f4f\u8fd9\u51e0\u70b9\uff1a  <\/p>\n
                                \n
                              • \u6539\u7236\u7ec4\u4ef6\u503c\u5fc5\u987b\u8c03\u7528set<\/strong>\uff0c\u4e0d\u80fd\u76f4\u63a5\u6539modelValue\uff1b  <\/li>\n
                              • \u591a\u4e2av-model\u5bf9\u5e94\u591a\u4e2aset\uff0c\u540d\u5b57\u8981\u548cdefineModel\u7684\u53c2\u6570\u4e00\u81f4\uff1b  <\/li>\n
                              • \u7ed3\u5408computed\u3001watch\u3001\u7ec4\u5408\u5f0f\u51fd\u6570\u65f6\uff0c\u6ce8\u610f\u6570\u636e\u6d41\u5411\u548c\u7c7b\u578b\u4e00\u81f4\uff1b  <\/li>\n
                              • \u907f\u5f00\u201c\u5fd8\u8c03\u7528set\u3001\u7c7b\u578b\u4e0d\u5339\u914d\u3001\u5f02\u6b65\u66f4\u65b0\u201d\u8fd9\u51e0\u4e2a\u5751\u3002  <\/li>\n<\/ul>\n
                                \u5b9e\u9645\u9879\u76ee\u91cc\uff0c\u4e0d\u7ba1\u662f\u5c01\u88c5\u8868\u5355\u7ec4\u4ef6\u3001\u8054\u52a8\u7ec4\u4ef6\uff0c\u8fd8\u662f\u505a\u590d\u6742\u7684\u53cc\u5411\u7ed1\u5b9a\u903b\u8f91\uff0cset<\/code>\u90fd\u80fd\u8ba9\u4ee3\u7801\u66f4\u7b80\u6d01\u6613\u7ef4\u62a4\uff0c\u591a\u5199\u51e0\u4e2a\u81ea\u5b9a\u4e49\u7ec4\u4ef6\u7ec3\u624b,\u81ea\u7136\u5c31\u719f\u4e86\uff5e<\/p>","pubDate":"Mon, 30 Mar 2026 08:02:06 +0800"},{"title":"Vue3\u91ccdefineModel\u7684deep\u9009\u9879\u548b\u7528\uff1f\u8fd9\u4e9b\u573a\u666f\u548c\u5751\u8981\u7559\u610f\uff01","link":"https:\/\/codeqd.com\/post\/20260321716.html","description":"
                                \u5148\u641e\u61c2defineModel\u548cdeep\u662f\u5e72\u5565\u7684\uff1f<\/h2>\n
                                \u54b1\u5148\u56de\u5fc6\u4e0b,Vue3.4\u4e4b\u540e\u63a8\u51fa\u7684defineModel<\/code>\uff0c\u662f\u4e2a\u7b80\u5316\u7ec4\u4ef6\u53cc\u5411\u7ed1\u5b9a\u7684\u8bed\u6cd5\u7cd6\uff0c\u4ee5\u524d\u5199v-model\u53cc\u5411\u7ed1\u5b9a\uff0c\u5f97\u540c\u65f6\u7528defineProps<\/code>\u63a5\u6536modelValue<\/code>\uff0c\u518d\u7528defineEmits<\/code>\u89e6\u53d1update:modelValue<\/code>\uff0c\u73b0\u5728\u7528defineModel<\/code>\u4e00\u884c\u4ee3\u7801\u5c31\u80fd\u641e\u5b9a\u53cc\u5411\u7ed1\u5b9a\u903b\u8f91\u3002  <\/p>\n
                                \u4f46\u5982\u679c\u7236\u7ec4\u4ef6\u4f20\u7ed9\u5b50\u7ec4\u4ef6\u7684\u662f\u5bf9\u8c61\u3001\u6570\u7ec4<\/strong>\u8fd9\u7c7b\u590d\u6742\u6570\u636e\uff0c\u95ee\u9898\u5c31\u6765\u4e86\uff1a\u9ed8\u8ba4\u60c5\u51b5\u4e0b\uff0c\u53ea\u6709\u4fee\u6539\u6570\u636e\u7684\u201c\u9876\u5c42\u7ed3\u6784\u201d\uff08\u6bd4\u5982\u66ff\u6362\u6574\u4e2a\u5bf9\u8c61\u3001\u7ed9\u6570\u7ec4\u6362\u4e2a\u65b0\u5143\u7d20\uff09\uff0c\u7236\u7ec4\u4ef6\u624d\u4f1a\u66f4\u65b0\uff1b\u8981\u662f\u6539\u7684\u662f\u5d4c\u5957\u5c5e\u6027\uff08\u6bd4\u5982\u5bf9\u8c61\u91cc\u7684\u5bf9\u8c61\u3001\u6570\u7ec4\u91cc\u7684\u5bf9\u8c61\u7684\u67d0\u4e2a\u5c5e\u6027\uff09\uff0c\u7236\u7ec4\u4ef6\u538b\u6839\u6ca1\u53cd\u5e94\uff0c\u8fd9\u65f6\u5019deep<\/code>\u9009\u9879\u5c31\u6d3e\u4e0a\u7528\u573a\u4e86\u2014\u2014\u5f00\u542fdeep<\/code>\u540e\uff0c\u5b50\u7ec4\u4ef6\u91cc\u4fee\u6539\u5d4c\u5957\u5c5e\u6027\uff0c\u7236\u7ec4\u4ef6\u4e5f\u80fd\u8ddf\u7740\u66f4\u65b0\u3002  <\/p>\n
                                \u5565\u573a\u666f\u4e0b\u5fc5\u987b\u5f00deep\uff1f<\/h2>\n
                                \u4e3e\u51e0\u4e2a\u5b9e\u9645\u5f00\u53d1\u4e2d\u5e38\u89c1\u7684\u60c5\u51b5,\u4f60\u5c31\u61c2\u5565\u65f6\u5019\u975e\u5f00deep<\/code>\u4e0d\u53ef\u4e86\uff1a  <\/p>\n
                                \u8868\u5355\u91cc\u7684\u6df1\u5c42\u5b57\u6bb5\u7f16\u8f91<\/h3>\n
                                \u6bd4\u5982\u505a\u4e2a\u7528\u6237\u4fe1\u606f\u5f39\u7a97,\u7236\u7ec4\u4ef6\u4f20\u4e2auser<\/code>\u5bf9\u8c61\uff1a  <\/p>\n
                                { \n  name: '\u5f20\u4e09', \n  detail: { age: 18, address: { city: '\u5317\u4eac' } } \n}<\/pre>\n
                                \u5b50\u7ec4\u4ef6\u91cc\u8981\u6539user.detail.address.city<\/code>\uff0c\u8fd9\u65f6\u5019\u5982\u679c\u6ca1\u5f00deep<\/code>\uff0c\u6539\u5b8c\u57ce\u5e02\u540d\u7236\u7ec4\u4ef6\u7684user<\/code>\u5bf9\u8c61\u4e0d\u4f1a\u66f4\u65b0\uff0c\u9875\u9762\u4e5f\u4e0d\u5237\u65b0\uff0c\u5fc5\u987b\u5f00deep<\/code>\uff0c\u624d\u80fd\u8ba9\u7236\u7ec4\u4ef6\u540c\u6b65\u53d8\u5316\u3002  <\/p>\n
                                \u6811\u5f62\u7ed3\u6784\/\u5c42\u7ea7\u6570\u636e\u64cd\u4f5c<\/h3>\n
                                \u6bd4\u5982\u505a\u4e2a\u6743\u9650\u6811,\u6bcf\u4e2a\u8282\u70b9\u6709children<\/code>\u6570\u7ec4\uff0c\u5b50\u7ec4\u4ef6\u91cc\u4fee\u6539\u67d0\u4e2a\u5b50\u8282\u70b9\u7684\u9009\u4e2d\u72b6\u6001\uff08\u6bd4\u5982node.children[0].checked = true<\/code>\uff09\uff0c\u8fd9\u79cd\u5d4c\u5957\u7ed3\u6784\u7684\u4fee\u6539\uff0c\u5fc5\u987b\u9760deep<\/code>\u624d\u80fd\u8ba9\u7236\u7ec4\u4ef6\u7684\u6811\u6570\u636e\u5b9e\u65f6\u66f4\u65b0\u3002  <\/p>\n
                                \u52a8\u6001\u914d\u7f6e\u9879\u7684\u5d4c\u5957\u4fee\u6539<\/h3>\n
                                \u6bd4\u5982\u540e\u53f0\u914d\u7f6e\u4e00\u4e2a\u8868\u5355\u7684\u52a8\u6001\u89c4\u5219,\u89c4\u5219\u662f\u4e2a\u5d4c\u5957\u5bf9\u8c61\uff1a  <\/p>\n
                                { \n  rule: { \n    type: 'input', \n    props: { placeholder: '\u8bf7\u8f93\u5165' } \n  } \n}<\/pre>\n
                                \u5b50\u7ec4\u4ef6\u91cc\u6539props.placeholder<\/code>\uff0c\u7236\u7ec4\u4ef6\u5f97\u540c\u6b65\uff0c\u8fd9\u65f6\u5019deep<\/code>\u5fc5\u987b\u5f00\u3002  <\/p>\n
                                \u4f46\u6ce8\u610f\u54e6\uff01\u5982\u679c\u53ea\u662f\u6539\u7b80\u5355\u6570\u636e\uff08\u6bd4\u5982\u5b57\u7b26\u4e32\u3001\u6570\u5b57\uff09\uff0c\u6216\u8005\u53ea\u9700\u8981\u66ff\u6362\u6574\u4e2a\u5bf9\u8c61\/\u6570\u7ec4\uff08\u6bd4\u5982\u7ed9\u6570\u7ec4push<\/code>\u65b0\u5143\u7d20\u540e\u7528\u6df1\u62f7\u8d1d\u66ff\u6362\uff09\uff0c\u90a3\u6ca1\u5fc5\u8981\u5f00deep<\/code>\uff0c\u53cd\u800c\u4f1a\u5f71\u54cd\u6027\u80fd\u3002  <\/p>\n
                                \u4ee3\u7801\u91cc\u548b\u914d\u7f6edeep\uff1f\u5b9e\u64cd\u4f8b\u5b50\u8d70\u4e00\u4e2a<\/h2>\n
                                \u5149\u8bf4\u4e0d\u7ec3\u5047\u628a\u5f0f,\u54b1\u5199\u4e24\u6bb5\u4ee3\u7801\uff0c\u5bf9\u6bd4\u5f00deep<\/code>\u548c\u4e0d\u5f00deep<\/code>\u7684\u533a\u522b\u3002  <\/p>\n
                                \u7236\u7ec4\u4ef6\uff08Parent.vue\uff09<\/h3>\n
                                \u5148\u5199\u7236\u7ec4\u4ef6,\u7528v-model<\/code>\u628auser<\/code>\u5bf9\u8c61\u4f20\u7ed9\u5b50\u7ec4\u4ef6\uff1a  <\/p>\n
                                <template>\n  <div>\n    \u7236\u7ec4\u4ef6\u7528\u6237\u4fe1\u606f\uff1a{{ user }}\n    <Child v-model="user" \/>\n  <\/div>\n<\/template>\n<script setup>\nimport { ref } from 'vue'\nimport Child from '.\/Child.vue'\nconst user = ref({\n  name: '\u5f20\u4e09',\n  detail: {\n    age: 18,\n    address: { city: '\u5317\u4eac' }\n  }\n})\n<\/script><\/pre>\n
                                \u5b50\u7ec4\u4ef6\uff08Child.vue\uff09\uff1a\u5f00deep\u7684\u60c5\u51b5<\/h3>\n
                                \u5b50\u7ec4\u4ef6\u91cc\u7528defineModel({ deep: true })<\/code>\u63a5\u6536\u6570\u636e\uff0c\u4fee\u6539\u5d4c\u5957\u5c5e\u6027\uff1a  <\/p>\n
                                <template>\n  <div>\n    \u5b50\u7ec4\u4ef6\u4fee\u6539\u5e74\u9f84\uff1a<button @click="changeAge">\u6539\u5e74\u9f84<\/button>\n    \u5b50\u7ec4\u4ef6\u4fee\u6539\u57ce\u5e02\uff1a<button @click="changeCity">\u6539\u57ce\u5e02<\/button>\n  <\/div>\n<\/template>\n<script setup>\nconst model = defineModel({ deep: true }) \/\/ \u5173\u952e\uff1a\u914d\u7f6edeep\u4e3atrue\nconst changeAge = () => {\n  model.value.detail.age = 20 \/\/ \u6539\u5d4c\u5957\u7684age\n}\nconst changeCity = () => {\n  model.value.detail.address.city = '\u4e0a\u6d77' \/\/ \u6539\u5d4c\u5957\u7684city\n}\n<\/script><\/pre>\n
                                \u70b9\u51fb\u6309\u94ae\u540e,\u7236\u7ec4\u4ef6\u7684user.detail.age<\/code>\u548cuser.detail.address.city<\/code>\u90fd\u4f1a\u66f4\u65b0\uff0c\u9875\u9762\u4e5f\u4f1a\u91cd\u65b0\u6e32\u67d3\u3002  <\/p>\n
                                \u5b50\u7ec4\u4ef6\uff08Child.vue\uff09\uff1a\u4e0d\u5f00deep\u7684\u60c5\u51b5<\/h3>\n
                                \u628adefineModel({ deep: true })<\/code>\u6539\u6210defineModel()<\/code>\uff0c\u518d\u70b9\u6309\u94ae\uff0c\u7236\u7ec4\u4ef6\u7684user<\/code>\u5bf9\u8c61\u4e0d\u4f1a\u53d8\u2014\u2014\u56e0\u4e3a\u53ea\u6539\u4e86\u5d4c\u5957\u5c5e\u6027\uff0c\u6ca1\u89e6\u53d1\u9876\u5c42\u66f4\u65b0\uff0c\u8fd9\u65f6\u5019\u53ea\u6709\u628a\u6574\u4e2adetail<\/code>\u5bf9\u8c61\u66ff\u6362\uff08\u6bd4\u5982model.value.detail = { ...model.value.detail, age: 20 }<\/code>\uff09\uff0c\u7236\u7ec4\u4ef6\u624d\u4f1a\u66f4\u65b0\uff0c\u4f46\u8fd9\u6837\u5199\u4ee3\u7801\u5f88\u9ebb\u70e6\uff0c\u4e0d\u5982\u5f00deep<\/code>\u65b9\u4fbf\u3002  <\/p>\n
                                \u7528deep\u65f6\u5bb9\u6613\u8e29\u7684\u201c\u6697\u5751\u201d\u6709\u54ea\u4e9b\uff1f<\/h2>\n
                                deep<\/code>\u867d\u597d\uff0c\u4f46\u7528\u9519\u4e86\u4e5f\u5bb9\u6613\u6389\u5751\u91cc\uff0c\u8fd9\u51e0\u4e2a\u5e38\u89c1\u95ee\u9898\u5f97\u7559\u610f\uff1a  <\/p>\n
                                \u6027\u80fd\u95ee\u9898\uff1a\u6df1\u5ea6\u76d1\u542c\u5f88\u201c\u5403\u6027\u80fd\u201d<\/h3>\n
                                \u5982\u679c\u7236\u7ec4\u4ef6\u4f20\u7684\u5bf9\u8c61\u7279\u522b\u5927\uff08\u6bd4\u5982\u6709\u51e0\u5341\u5c42\u5d4c\u5957\u3001\u51e0\u767e\u4e2a\u5c5e\u6027\uff09\uff0c\u5f00deep<\/code>\u540eVue\u8981\u9012\u5f52\u904d\u5386\u6240\u6709\u5d4c\u5957\u5c5e\u6027\uff0c\u7ed9\u6bcf\u4e2a\u5c5e\u6027\u52a0\u54cd\u5e94\u5f0f\u76d1\u542c\uff0c\u8fd9\u4f1a\u8ba9\u521d\u59cb\u5316\u548c\u66f4\u65b0\u65f6\u7684\u6027\u80fd\u53d8\u5dee\uff0c\u6240\u4ee5\u975e\u5fc5\u8981\u522b\u5f00\uff0c\u6bd4\u5982\u53ea\u662f\u6539\u9876\u5c42\u5c31\u591f\u7684\u573a\u666f\uff0c\u575a\u51b3\u4e0d\u5f00\u3002  <\/p>\n
                                \u54cd\u5e94\u5f0f\u201c\u4e22\u4e86\u201d\uff1a\u624b\u52a8\u6539\u6570\u636e\u7ed3\u6784\u5bb9\u6613\u7ffb\u8f66<\/h3>\n
                                \u6bd4\u5982\u5b50\u7ec4\u4ef6\u91cc\u76f4\u63a5\u628amodel.value<\/code>\u6574\u4e2a\u66ff\u6362\u6210\u65b0\u5bf9\u8c61\uff1a  <\/p>\n
                                model.value = { name: '\u674e\u56db', detail: { ... }}<\/pre>\n
                                \u8fd9\u65f6\u5019\u54ea\u6015\u5f00\u4e86deep<\/code>\uff0c\u4e5f\u5f97\u786e\u4fdd\u65b0\u5bf9\u8c61\u662f\u54cd\u5e94\u5f0f\u7684\uff08\u6bd4\u5982\u7528reactive<\/code>\u5305\u4e00\u4e0b\uff09\uff0c\u5426\u5219\u65b0\u5bf9\u8c61\u7684\u5d4c\u5957\u5c5e\u6027\u4fee\u6539\u65f6\uff0c\u7236\u7ec4\u4ef6\u8fd8\u662f\u4e0d\u66f4\u65b0\u3002  <\/p>\n
                                \u7236\u7ec4\u4ef6\u7ed1\u5b9a\u65b9\u5f0f\u4e0d\u5bf9\uff1adeep\u767d\u5f00\u4e86<\/h3>\n
                                defineModel<\/code>\u57fa\u4e8ev-model\u53cc\u5411\u7ed1\u5b9a\uff0c\u5982\u679c\u7236\u7ec4\u4ef6\u6ca1\u5199v-model<\/code>\uff0c\u800c\u662f\u7528modelValue=\"user\"<\/code>\u5355\u5411\u4f20\u503c\uff0c\u90a3\u5b50\u7ec4\u4ef6\u91cc\u4e0d\u7ba1\u5f00\u4e0d\u5f00deep<\/code>\uff0c\u6539\u6570\u636e\u90fd\u4e0d\u4f1a\u89e6\u53d1\u7236\u7ec4\u4ef6\u66f4\u65b0\u2014\u2014\u56e0\u4e3a\u53cc\u5411\u7ed1\u5b9a\u7684\u524d\u63d0\u662fv-model\uff08\u5373\u540c\u65f6\u4f20\u503c+\u76d1\u542cupdate<\/code>\u4e8b\u4ef6\uff09\uff0c\u8fd9\u65f6\u5019\u5f97\u68c0\u67e5\u7236\u7ec4\u4ef6\u662f\u4e0d\u662f\u7528\u5bf9\u4e86v-model\u3002  <\/p>\n
                                \u548cshallowReactive\u3001shallowRef\u201c\u6253\u67b6\u201d<\/h3>\n
                                \u5982\u679c\u7236\u7ec4\u4ef6\u4f20\u7684\u662fshallowReactive(user)<\/code>\uff08\u6d45\u54cd\u5e94\u5f0f\u5bf9\u8c61\uff0c\u53ea\u6709\u9876\u5c42\u5c5e\u6027\u6709\u54cd\u5e94\u5f0f\uff09\uff0c\u90a3\u5b50\u7ec4\u4ef6\u5f00deep<\/code>\u4e5f\u6ca1\u7528\u2014\u2014\u56e0\u4e3a\u6e90\u6570\u636e\u672c\u8eab\u5c31\u6ca1\u7ed9\u5d4c\u5957\u5c5e\u6027\u52a0\u76d1\u542c\uff0c\u5b50\u7ec4\u4ef6\u518d\u600e\u4e48deep<\/code>\u4e5f\u201c\u76d1\u542c\u4e0d\u5230\u201d\uff0c\u540c\u7406\uff0c\u7236\u7ec4\u4ef6\u7528shallowRef<\/code>\u5305\u5bf9\u8c61\uff0c\u5b50\u7ec4\u4ef6deep<\/code>\u4e5f\u767d\u642d\u3002  <\/p>\n
                                \u548c\u5176\u4ed6\u54cd\u5e94\u5f0fAPI\u7ed3\u5408\u8981\u6ce8\u610f\u5565\uff1f<\/h2>\n
                                \u7236\u7ec4\u4ef6\u4f20\u9012\u6570\u636e\u65f6\u7528\u7684\u54cd\u5e94\u5f0fAPI\u4e0d\u540c,\u5b50\u7ec4\u4ef6deep<\/code>\u7684\u6548\u679c\u4e5f\u4e0d\u4e00\u6837\uff0c\u54b1\u5206\u60c5\u51b5\u770b\uff1a  <\/p>\n
                                  \n
                                • \u7236\u7ec4\u4ef6\u7528reactive<\/code>\u4f20\u5bf9\u8c61<\/strong> \u2192 \u5b50\u7ec4\u4ef6\u5f00deep<\/code>\uff1a\u80fd\u76d1\u542c\u5230\u6240\u6709\u5d4c\u5957\u5c5e\u6027\u53d8\u5316\uff0c\u6ca1\u95ee\u9898\u3002  <\/li>\n
                                • \u7236\u7ec4\u4ef6\u7528shallowReactive<\/code>\u4f20\u5bf9\u8c61<\/strong> \u2192 \u5b50\u7ec4\u4ef6\u5f00deep<\/code>\uff1a\u6ca1\u7528\uff0c\u56e0\u4e3ashallowReactive<\/code>\u53ea\u7ed9\u9876\u5c42\u52a0\u76d1\u542c\uff0c\u5d4c\u5957\u5c5e\u6027\u8fd8\u662f\u666e\u901a\u5bf9\u8c61\uff0c\u5b50\u7ec4\u4ef6deep<\/code>\u76d1\u542c\u4e0d\u5230\u3002  <\/li>\n
                                • \u7236\u7ec4\u4ef6\u7528ref<\/code>\u4f20\u5bf9\u8c61<\/strong>\uff08ref.value<\/code>\u662f\u5bf9\u8c61\uff09 \u2192 \u5b50\u7ec4\u4ef6\u5f00deep<\/code>\uff1a\u7b49\u4ef7\u4e8ereactive<\/code>\u7684\u60c5\u51b5\uff0c\u80fd\u6df1\u5ea6\u76d1\u542c\u3002  <\/li>\n
                                • \u7236\u7ec4\u4ef6\u7528shallowRef<\/code>\u4f20\u5bf9\u8c61<\/strong> \u2192 \u5b50\u7ec4\u4ef6\u5f00deep<\/code>\uff1ashallowRef<\/code>\u53ea\u6709\u5728\u66ff\u6362value<\/code>\u65f6\u89e6\u53d1\u66f4\u65b0\uff0c\u5d4c\u5957\u5c5e\u6027\u4fee\u6539\u4e0d\u89e6\u53d1\uff0c\u6240\u4ee5\u5b50\u7ec4\u4ef6deep<\/code>\u4e5f\u76d1\u542c\u4e0d\u5230\u3002  <\/li>\n<\/ul>\n
                                  \u7b80\u5355\u8bf4\uff1a\u5b50\u7ec4\u4ef6deep<\/code>\u7684\u6548\u679c\uff0c\u53d6\u51b3\u4e8e\u7236\u7ec4\u4ef6\u4f20\u9012\u7684\u54cd\u5e94\u5f0f\u6570\u636e\u672c\u8eab\u7684\u201c\u6df1\u5ea6\u201d<\/strong>\uff0c\u5982\u679c\u7236\u7ec4\u4ef6\u4f20\u7684\u662f\u6d45\u54cd\u5e94\u5f0f\u6570\u636e\uff0c\u5b50\u7ec4\u4ef6\u5f00deep<\/code>\u4e5f\u6ca1\u610f\u4e49\uff1b\u53ea\u6709\u7236\u7ec4\u4ef6\u4f20\u7684\u662f\u6df1\u54cd\u5e94\u5f0f\u6570\u636e\uff08reactive<\/code>\u6216ref<\/code>\u5305\u5bf9\u8c61\uff09\uff0c\u5b50\u7ec4\u4ef6deep<\/code>\u624d\u80fd\u53d1\u6325\u4f5c\u7528\u3002  <\/p>\n
                                  \u539f\u7406\u5c42\u9762\uff1adeep\u548b\u5b9e\u73b0\u201c\u6df1\u5ea6\u54cd\u5e94\u201d\u7684\uff1f<\/h2>\n
                                  Vue\u7684\u54cd\u5e94\u5f0f\u7cfb\u7edf\u9760\u4f9d\u8d56\u6536\u96c6+\u89e6\u53d1\u66f4\u65b0<\/strong>\u5b9e\u73b0\uff0c\u5f53\u5b50\u7ec4\u4ef6\u7528defineModel({ deep: true })<\/code>\u63a5\u6536\u5bf9\u8c61\/\u6570\u7ec4\u65f6\uff0cVue\u4f1a\u9012\u5f52\u904d\u5386\u8fd9\u4e2a\u6570\u636e\u7684\u6240\u6709\u5d4c\u5957\u5c5e\u6027\uff0c\u7ed9\u6bcf\u4e2a\u5c5e\u6027\u90fd\u5efa\u7acb\u201c\u4f9d\u8d56\u5173\u7cfb\u201d\uff08\u53ef\u4ee5\u7406\u89e3\u4e3a\u6bcf\u4e2a\u5c5e\u6027\u53d8\u5316\u65f6\uff0c\u901a\u77e5\u7236\u7ec4\u4ef6\u66f4\u65b0\uff09\u3002  <\/p>\n
                                  \u4e3e\u4e2a\u6817\u5b50\uff1a\u7236\u7ec4\u4ef6\u4f20user<\/code>\u5bf9\u8c61\uff0c\u5b50\u7ec4\u4ef6\u5f00deep<\/code>\u540e\uff0cVue\u4f1a\u904d\u5386user \u2192 user.detail \u2192 user.detail.address<\/code>\uff0c\u7ed9name<\/code>\u3001age<\/code>\u3001city<\/code>\u8fd9\u4e9b\u5c5e\u6027\u90fd\u88c5\u4e0a\u201c\u76d1\u542c\u5668\u201d\uff0c\u4e00\u65e6\u5b50\u7ec4\u4ef6\u91cc\u6539\u4e86city<\/code>\uff0c\u76d1\u542c\u5668\u5c31\u4f1a\u89e6\u53d1\uff0c\u544a\u8bc9\u7236\u7ec4\u4ef6\u201c\u6570\u636e\u53d8\u4e86\uff0c\u5feb\u66f4\u65b0\u201d\u3002  <\/p>\n
                                  \u8981\u662f\u6ca1\u5f00deep<\/code>\uff0cVue\u53ea\u4f1a\u7ed9user<\/code>\u8fd9\u4e2a\u9876\u5c42\u5bf9\u8c61\u88c5\u76d1\u542c\u5668\uff0c\u53ea\u6709\u66ff\u6362\u6574\u4e2auser<\/code>\u6216\u8005\u6539user<\/code>\u7684\u76f4\u63a5\u5c5e\u6027\uff08\u6bd4\u5982user.name<\/code>\uff09\u624d\u4f1a\u89e6\u53d1\u66f4\u65b0\uff0c\u5d4c\u5957\u7684detail<\/code>\u3001address<\/code>\u8fd9\u4e9b\u5c5e\u6027\u7684\u53d8\u5316\uff0c\u76d1\u542c\u5668\u201c\u770b\u4e0d\u5230\u201d\uff0c\u7236\u7ec4\u4ef6\u81ea\u7136\u4e0d\u66f4\u65b0\u3002  <\/p>\n
                                  \u7528deep\u7684\u5173\u952e\u539f\u5219<\/h2>\n
                                  defineModel<\/code>\u7684deep<\/code>\u9009\u9879\u662f\u628a\u201c\u53cc\u5203\u5251\u201d\uff1a\u7528\u5bf9\u4e86\u80fd\u89e3\u51b3\u5d4c\u5957\u6570\u636e\u53cc\u5411\u7ed1\u5b9a\u7684\u75db\u70b9\uff0c\u7528\u9519\u4e86\u4f1a\u8e29\u6027\u80fd\u548c\u54cd\u5e94\u5f0f\u7684\u5751\uff0c\u8bb0\u4f4f\u8fd9\u51e0\u70b9\uff0c\u624d\u80fd\u7528\u5f97\u987a\u624b\uff1a  <\/p>\n
                                    \n
                                  • \u53ea\u5728\u5fc5\u987b\u4fee\u6539\u5d4c\u5957\u5c5e\u6027\u4e14\u9700\u8981\u7236\u7ec4\u4ef6\u540c\u6b65<\/strong>\u65f6\u5f00deep<\/code>\uff1b  <\/li>\n
                                  • \u5f00\u4e4b\u524d\u5148\u68c0\u67e5\u7236\u7ec4\u4ef6\u4f20\u9012\u7684\u54cd\u5e94\u5f0f\u6570\u636e\u7c7b\u578b\uff08\u522b\u548cshallow<\/code>\u7cfb\u5217\u51b2\u7a81\uff09\uff1b  <\/li>\n
                                  • \u6027\u80fd\u654f\u611f\u573a\u666f\uff08\u6bd4\u5982\u5927\u6570\u636e\u5217\u8868\uff09\u5c3d\u91cf\u4e0d\u7528deep<\/code>\uff0c\u6362\u201c\u66ff\u6362\u6574\u4e2a\u5bf9\u8c61\/\u6570\u7ec4\u201d\u7684\u65b9\u5f0f\uff1b  <\/li>\n
                                  • \u5199\u4ee3\u7801\u65f6\u591a\u6d4b\u8bd5,\u770b\u7236\u7ec4\u4ef6\u662f\u5426\u771f\u7684\u540c\u6b65\u66f4\u65b0\u4e86\uff0c\u907f\u514d\u903b\u8f91\u9519\u8bef\u3002  <\/li>\n<\/ul>\n
                                    \u628a\u8fd9\u4e9b\u7ec6\u8282\u5403\u900f,\u7ec4\u4ef6\u53cc\u5411\u7ed1\u5b9a\u624d\u80fd\u66f4\u4e1d\u6ed1\uff5e<\/p>","pubDate":"Sun, 29 Mar 2026 20:02:39 +0800"},{"title":"Vue3\u91ccdefineComponent\u6709\u5565\u7528\uff1f\u770b\u5b8c\u8fd9\u7bc7\u4f60\u5c31\u61c2\u4e86\uff01","link":"https:\/\/codeqd.com\/post\/20260321715.html","description":"
                                    \u5f88\u591a\u521a\u5f00\u59cb\u5b66Vue3 + TypeScript\u7684\u540c\u5b66\uff0c\u90fd\u4f1a\u88abdefineComponent<\/code>\u641e\u61f5\uff1a\u8fd9\u4e1c\u897f\u5230\u5e95\u6709\u5565\u7528\uff1f\u4e0d\u7528\u5b83\u884c\u4e0d\u884c\uff1f\u4eca\u5929\u54b1\u4eec\u63b0\u5f00\u63c9\u788e\u4e86\u8bb2\u6e05\u695a\uff0c\u770b\u5b8c\u4f60\u5c31\u660e\u767d\u5565\u573a\u666f\u5fc5\u987b\u7528\u5b83\uff5e  <\/p>\n
                                    defineComponent\u4e3a\u5565\u80fd\u5e2eTypeScript\u201c\u770b\u61c2\u201d\u7ec4\u4ef6\uff1f<\/h2>\n
                                    \u5148\u60f3\u4e2a\u95ee\u9898\uff1aTypeScript\uff08\u4ee5\u4e0b\u7b80\u79f0TS\uff09\u672c\u8eab\u4e0d\u8ba4\u8bc6Vue\u7684\u7ec4\u4ef6\u9009\u9879\u554a\uff01\u6bd4\u5982\u4f60\u5199\u4e2a props<\/code>\u3001methods<\/code>\uff0cTS\u548b\u77e5\u9053\u8fd9\u4e9b\u5c5e\u6027\u7684\u7c7b\u578b\uff1f  <\/p>\n
                                    \u4e3e\u4e2a\u4f8b\u5b50,\u4e0d\u7528defineComponent<\/code>\u65f6\uff1a  <\/p>\n
                                    const MyComponent = {\n  props: {\n    msg: String\n  },\n  methods: {\n    handleClick() {\n      this.msg.toLowerCase() \/\/ TS\u62a5\u9519\uff1a\u5bf9\u8c61\u53ef\u80fd\u4e3a\u201cundefined\u201d\n    }\n  }\n}<\/pre>\n
                                    TS\u6839\u672c\u201c\u770b\u4e0d\u61c2\u201dthis.msg<\/code> \u662f\u5565\u7c7b\u578b\uff0c\u66f4\u4e0d\u77e5\u9053\u80fd\u4e0d\u80fd\u8c03\u7528 toLowerCase<\/code>\u3002  <\/p>\n
                                    \u4f46\u7528defineComponent<\/code>\u5305\u88f9\u540e\uff1a  <\/p>\n
                                    import { defineComponent } from 'vue'\nconst MyComponent = defineComponent({\n  props: {\n    msg: String\n  },\n  methods: {\n    handleClick() {\n      this.msg.toLowerCase() \/\/ TS\u4e0d\u62a5\u9519\u4e86\uff01\u56e0\u4e3a\u5b83\u77e5\u9053msg\u662fstring\uff08\u6216undefined\uff09\n    }\n  }\n})<\/pre>\n
                                    defineComponent<\/code> \u5c31\u50cf\u4e2a\u201c\u7ffb\u8bd1\u5b98\u201d<\/strong>\uff0c\u628aVue\u7684\u7ec4\u4ef6\u9009\u9879\u7ffb\u8bd1\u6210TS\u80fd\u7406\u89e3\u7684\u7c7b\u578b\uff0c\u5b83\u5185\u90e8\u4f1a\u505a\u8fd9\u4e9b\u4e8b\uff1a  <\/p>\n
                                      \n
                                    • \u5206\u6790props<\/code>\u7684\u7c7b\u578b\u5b9a\u4e49\uff08\u6bd4\u5982String<\/code>\u5bf9\u5e94string<\/code>\uff09\uff0c\u63a8\u65ad\u51fathis.msg<\/code>\u7684\u7c7b\u578b\uff1b  <\/li>\n
                                    • \u628amethods<\/code>\u91cc\u7684\u51fd\u6570\u4e0a\u4e0b\u6587\uff08this<\/code>\uff09\u548c\u7ec4\u4ef6\u5176\u4ed6\u9009\u9879\uff08data<\/code>\u3001computed<\/code>\u7b49\uff09\u505a\u7c7b\u578b\u5408\u5e76\uff1b  <\/li>\n
                                    • \u751a\u81f3\u80fd\u8bc6\u522bprops<\/code>\u7684required<\/code>\u3001default<\/code>\u7b49\u914d\u7f6e\uff0c\u7cbe\u786e\u63a8\u5bfc\u7c7b\u578b\uff08\u6bd4\u5982required: true<\/code>\u65f6\uff0cmsg<\/code>\u5c31\u4e0d\u662f\u53ef\u9009\u7684\uff09\u3002  <\/li>\n<\/ul>\n
                                      \u7b80\u5355\u8bf4\uff1a\u6ca1\u6709defineComponent<\/code>\uff0cTS\u5c31\u201c\u778e\u201d\u4e86\uff0c\u6ca1\u6cd5\u5e2e\u4f60\u63d0\u524d\u53d1\u73b0\u7c7b\u578b\u9519\u8bef\uff1b\u7528\u4e86\u5b83\uff0cTS\u624d\u80fd\u7cbe\u51c6\u68c0\u67e5\u7ec4\u4ef6\u91cc\u7684\u7c7b\u578b\u95ee\u9898<\/strong>\u3002  <\/p>\n
                                      \u9009\u9879\u5f0fAPI\u5199\u7ec4\u4ef6\uff0cdefineComponent\u548b\u515c\u5e95\uff1f<\/h2>\n
                                      \u5f88\u591a\u540c\u5b66\u4e60\u60ef\u7528\u9009\u9879\u5f0fAPI<\/strong>\uff08\u6bd4\u5982data<\/code>\u3001methods<\/code>\u3001watch<\/code>\u8fd9\u79cd\u5199\u6cd5\uff09\uff0c\u8fd9\u65f6\u5019defineComponent<\/code>\u7684\u4f5c\u7528\u66f4\u5173\u952e\u2014\u2014\u5b83\u662f\u9009\u9879\u5f0fAPI\u7684\u201c\u7c98\u5408\u5242\u201d\uff0c\u80fd\u628a\u96f6\u6563\u7684\u9009\u9879\u201c\u7c98\u201d\u6210TS\u80fd\u8bc6\u522b\u7684\u6574\u4f53\u3002  <\/p>\n
                                      \u518d\u4e3e\u4e2a\u7ee7\u627f\u7684\u4f8b\u5b50\uff1a  <\/p>\n
                                      \/\/ \u7236\u7ec4\u4ef6\nconst BaseCard = defineComponent({\n  data() {\n    return { title: '\u57fa\u7840\u5361\u7247' }\n  },\n  methods: {\n    logTitle() {\n      console.log(this.title)\n    }\n  }\n})\n\/\/ \u5b50\u7ec4\u4ef6\u7ee7\u627f\u7236\u7ec4\u4ef6\nconst UserCard = defineComponent({\n  extends: BaseCard,\n  data() {\n    return { subtitle: '\u7528\u6237\u4e13\u5c5e' }\n  },\n  mounted() {\n    this.logTitle() \/\/ TS\u80fd\u8bc6\u522bthis.title\u662fstring\n    console.log(this.subtitle) \/\/ TS\u4e5f\u80fd\u8bc6\u522bthis.subtitle\u662fstring\n  }\n})<\/pre>\n
                                      \u5982\u679c\u4e0d\u7528defineComponent<\/code>\uff0c\u5b50\u7ec4\u4ef6\u7ee7\u627f\u540e\uff0cTS\u6839\u672c\u201c\u8ba4\u4e0d\u51fa\u201d\u7236\u7ec4\u4ef6\u7684title<\/code>\u548clogTitle<\/code>\u2014\u2014\u7c7b\u578b\u76f4\u63a5\u4e22\u5931\uff01  <\/p>\n
                                      \u540c\u7406,\u7528mixins<\/code>\u3001provide\/inject<\/code>\u8fd9\u4e9b\u9009\u9879\u5f0fAPI\u65f6\uff0cdefineComponent<\/code>\u4f1a\u5e2eTS\u628a\u6240\u6709\u9009\u9879\u7684\u7c7b\u578b\u5408\u5e76\u3001\u7ee7\u627f<\/strong>\uff0c\u4fdd\u8bc1\u4f60\u5728\u5199\u4ee3\u7801\u65f6\uff0cthis<\/code>\u4e0a\u7684\u5c5e\u6027\u90fd\u6709\u51c6\u786e\u7684\u7c7b\u578b\u63d0\u793a\u3002  <\/p>\n
                                      \u548csetup\u8bed\u6cd5\u7cd6\u4e00\u8d77\u7528\uff0cdefineComponent\u6709\u5565\u4e0d\u4e00\u6837\uff1f<\/h2>\n
                                      \u73b0\u5728\u5f88\u591a\u4eba\u7528<script setup><\/code>\uff08setup\u8bed\u6cd5\u7cd6\uff09\u5199\u7ec4\u4ef6\uff0c\u8fd9\u65f6\u5019\u8fd8\u8981\u4e0d\u8981defineComponent<\/code>\uff1f\u5206\u573a\u666f\u770b\uff1a  <\/p>\n
                                      \u573a\u666f1\uff1a\u9700\u8981\u663e\u5f0f\u8bbe\u7f6e\u7ec4\u4ef6name<\/h3>\n
                                      <script setup><\/code>\u7684\u7ec4\u4ef6name<\/code>\u9ed8\u8ba4\u662f\u6587\u4ef6\u540d\uff08\u6bd4\u5982UserCard.vue<\/code>\u5bf9\u5e94name<\/code>\u662fUserCard<\/code>\uff09\uff0c\u4f46\u5982\u679c\u9700\u8981\u81ea\u5b9a\u4e49name<\/code>\uff08\u6bd4\u5982DevTools\u8c03\u8bd5\u3001\u9012\u5f52\u7ec4\u4ef6\u8c03\u7528\uff09\uff0c\u5c31\u5f97\u7528defineComponent<\/code>\uff1a  <\/p>\n
                                      export default defineComponent({\n  name: 'CustomCardName',\n})\n<script setup> {\n  \/\/ \u7ec4\u4ef6\u903b\u8f91\n}\n<\/script><\/pre>\n
                                      \u8fd9\u6837\u7ec4\u4ef6\u7684name<\/code>\u5c31\u88ab\u663e\u5f0f\u8bbe\u7f6e\u4e3aCustomCardName<\/code>\uff0c\u800c\u4e0d\u662f\u6587\u4ef6\u540d\u3002  <\/p>\n
                                      \u573a\u666f2\uff1a\u914d\u5408JSX\/TSX\u5199\u7ec4\u4ef6<\/h3>\n
                                      \u7528JSX\/TSX\u5199Vue\u7ec4\u4ef6\u65f6\uff0cdefineComponent<\/code>\u662f\u201c\u6807\u914d\u201d\u3002  <\/p>\n
                                      import { defineComponent } from 'vue'\nexport default defineComponent({\n  props: {\n    list: {\n      type: Array as PropType<string[]>,\n      required: true\n    }\n  },\n  render() {\n    return (\n      <div>\n        {this.list.map(item => <p>{item}<\/p>)}\n      <\/div>\n    )\n  }\n})<\/pre>\n
                                      \u8fd9\u91ccdefineComponent<\/code>\u5e2eTS\u8bc6\u522brender<\/code>\u51fd\u6570\u91ccthis.list<\/code>\u7684\u7c7b\u578b\uff08string[]<\/code>\uff09\uff0c\u907f\u514d\u7c7b\u578b\u9519\u8bef\u3002  <\/p>\n
                                      \u573a\u666f3\uff1a\u548c\u7b2c\u4e09\u65b9\u5e93\/\u63d2\u4ef6\u914d\u5408<\/h3>\n
                                      \u6bd4\u5982Vue Router\u7684\u8def\u7531\u7ec4\u4ef6\u914d\u7f6e\u3001UI\u5e93\u7684\u81ea\u5b9a\u4e49\u7ec4\u4ef6\u6ce8\u518c\uff0c\u5f88\u591a\u573a\u666f\u9700\u8981\u4f20\u9012\u201c\u5b8c\u6574\u7684\u7ec4\u4ef6\u9009\u9879\u5bf9\u8c61\u201d\uff0c\u8fd9\u65f6\u5019defineComponent<\/code>\u5305\u88f9\u540e\u7684\u7ec4\u4ef6\u80fd\u63d0\u4f9b\u66f4\u51c6\u786e\u7684\u7c7b\u578b\u4fe1\u606f\uff0c\u907f\u514d\u5e93\u7684\u7c7b\u578b\u68c0\u67e5\u62a5\u9519\u3002  <\/p>\n
                                      \u5b9e\u9645\u5f00\u53d1\u91cc\uff0c\u54ea\u4e9b\u573a\u666f\u5fc5\u987b\u7528defineComponent\uff1f<\/h2>\n
                                      \u4e0d\u662f\u6240\u6709\u573a\u666f\u90fd\u8981\u786c\u5957defineComponent<\/code>\uff0c\u4f46\u8fd93\u7c7b\u573a\u666f\u51e0\u4e4e\u201c\u79bb\u4e0d\u5f00\u5b83\u201d\uff1a  <\/p>\n
                                      \u56e2\u961f\u5f3a\u4f9d\u8d56TypeScript\u5f00\u53d1<\/h3>\n
                                      \u5982\u679c\u56e2\u961f\u8981\u6c42\u201c\u7f16\u8bd1\u671f\u53d1\u73b0\u6240\u6709\u7c7b\u578b\u9519\u8bef\u201d<\/strong>\uff0c\u90a3\u5199\u7ec4\u4ef6\u65f6\u5fc5\u987b\u7528defineComponent<\/code>\uff0c\u5426\u5219\uff0cTS\u6ca1\u6cd5\u68c0\u67e5props<\/code>\u4f20\u53c2\u662f\u5426\u6b63\u786e\u3001this<\/code>\u4e0a\u7684\u65b9\u6cd5\u6709\u6ca1\u6709\u5199\u9519\u2026\u2026\u5f88\u591a\u9519\u8bef\u53ea\u80fd\u7b49\u5230\u8fd0\u884c\u65f6\u624d\u66b4\u9732\uff0cdebug\u6210\u672c\u66b4\u589e\u3002  <\/p>\n
                                      \u5f00\u53d1\u901a\u7528\u7ec4\u4ef6\u5e93<\/h3>\n
                                      \u50cfElement Plus\u3001Ant Design Vue\u8fd9\u4e9b\u7ec4\u4ef6\u5e93\uff0c\u5fc5\u987b\u8ba9\u4f7f\u7528\u8005\u5728IDE\u91cc\u62ff\u5230\u7cbe\u51c6\u7684\u7c7b\u578b\u63d0\u793a\uff08\u6bd4\u5982props<\/code>\u7684\u53ef\u9009\u503c\u3001emit<\/code>\u7684\u4e8b\u4ef6\u7c7b\u578b\uff09\u3002defineComponent<\/code>\u80fd\u5e2e\u7ec4\u4ef6\u5e93\u5f00\u53d1\u8005\u628a\u7c7b\u578b\u201c\u710a\u6b7b\u201d\u5728\u7ec4\u4ef6\u91cc\uff0c\u7528\u6237\u5199\u4ee3\u7801\u65f6\u81ea\u52a8\u89e6\u53d1\u63d0\u793a\u3002  <\/p>\n
                                      \u65e7Vue2\u9879\u76ee\u8fc1\u79fb\u5230Vue3<\/h3>\n
                                      \u5f88\u591a\u8001\u9879\u76ee\u8fd8\u7528\u9009\u9879\u5f0fAPI\uff08data<\/code>\u3001methods<\/code>\u90a3\u5957\uff09\uff0c\u8fc1\u79fb\u5230Vue3\u65f6\uff0c\u7528defineComponent<\/code>\u80fd\u65e0\u7f1d\u8854\u63a5\u7c7b\u578b\u7cfb\u7edf<\/strong>\u2014\u2014\u539f\u6765\u7684\u4ee3\u7801\u7ed3\u6784\u4e0d\u7528\u5927\u6539\uff0c\u53ea\u9700\u8981\u628a\u7ec4\u4ef6\u7528defineComponent<\/code>\u5305\u88f9\uff0cTS\u5c31\u80fd\u7acb\u523b\u5f00\u59cb\u7c7b\u578b\u68c0\u67e5\uff0c\u51cf\u5c11\u8fc1\u79fb\u6210\u672c\u3002  <\/p>\n
                                      \u8bef\u533a\uff1a\u53ea\u7528