{"id":929,"date":"2022-03-12T11:59:27","date_gmt":"2022-03-12T03:59:27","guid":{"rendered":"http:\/\/zhuxinyong.com\/?p=929"},"modified":"2022-05-23T00:36:00","modified_gmt":"2022-05-22T16:36:00","slug":"vmodel-yu-sync-de-yi-tong","status":"publish","type":"post","link":"https:\/\/zhuxinyong.com\/?p=929","title":{"rendered":"v-model \u4e0e .sync \u7684\u5f02\u540c"},"content":{"rendered":"

<\/span><\/a>\u7528\u6cd5\uff1a<\/h2>\n

<\/span><\/a>v-model \uff082.2.0+\uff09<\/h3>\n
<!--v-model\u5199\u6cd5-->\n<my-component v-model="value">\n<!--\u5c55\u5f00\u8bed\u6cd5\u7cd6\u540e\u7684\u5199\u6cd5-->\n<my-component\n  :value="value"\n  @input="value = $event.target.value"\n>\n<\/code><\/pre>\n
\u4f7f\u7528\uff1a<\/p>\n
\/\/ \u7236\u7ec4\u4ef6\n<child v-model="love"\/>\n\n\/\/ \u5b50\u7ec4\u4ef6\n{\n    props:{\n        value:{\n            type:String,\n            default:'my love'\n        }\n    },\n    ...\n    methods:{\n        onClick(){\n            this.$emit('input','love you!')\n        }\n    }\n}\n<\/code><\/pre>\n
v-model \u9ed8\u8ba4\u4f1a\u5229\u7528\u540d\u4e3a value \u7684 prop \u548c\u540d\u4e3a input \u7684\u4e8b\u4ef6\uff0c\u4f46\u662f\u53ef\u901a\u8fc7 model \u6765\u4fee\u6539\uff0c\u540c\u65f6\u9700\u8981\u624b\u52a8\u7684\u629b\u51fa\u4fee\u6539\u540e event \u7684\u540d\u5b57\uff1a<\/p>\n
Vue.component('my-component', {\n  model: {\n    prop: 'checked',\n    event: 'change'\n  },\n  props: {\n    checked: Boolean \/\/ \u8fd8\u662f\u9700\u8981\u58f0\u660e\n  },\n  template: `\n    <input\n      type="checkbox"\n      v-bind:checked="checked"\n      v-on:change="$emit('change', $event.target.checked)" \/\/ \u624b\u52a8\u629b\u51fa\u4e8b\u4ef6\n    >\n  `\n})\n<\/code><\/pre>\n
\u7ec4\u4ef6\u4f7f\u7528\u65b9\u6cd5\u4e0d\u53d8\uff1a<\/p>\n
<my-component v-model="checkedStatus">\n<\/code><\/pre>\n
<\/span><\/a>.sync (2.3.0+)<\/h3>\n
<!--\u8bed\u6cd5\u7cd6.sync-->\n<my-component :value.sync="msg" \/>\n<!--\u7f16\u8bd1\u540e\u7684\u5199\u6cd5-->\n<my-component \n  :value="msg" \n  @update:value="(val) => msg = val"\n>\n<\/code><\/pre>\n
\u4f7f\u7528\uff1a<\/p>\n
\/\/ \u7236\u7ec4\u4ef6\n<dialog :visible.sync="isVisible"\/>\n\n\/\/ \u5b50\u7ec4\u4ef6\n{\n    props:{\n        visible:{\n            type:Boolean,\n            default:false\n        }\n    },\n    ...\n    methods:{\n        onClose(){\n            this.$emit('update:visible',false)\n        }\n    }\n}\n<\/code><\/pre>\n
<\/span><\/a>\u540c<\/h3>\n
    \n
  1. \u4e24\u8005\u7684\u672c\u8d28\u90fd\u662f\u8bed\u6cd5\u7cd6\u3002<\/li>\n
  2. \u76ee\u7684\u90fd\u662f\u5b9e\u73b0\u7ec4\u4ef6\u4e0e\u5916\u90e8\u6570\u636e\u7684\u53cc\u5411\u7ed1\u5b9a\u3002<\/li>\n<\/ol>\n
    <\/span><\/a>\u5f02<\/h3>\n
      \n
    1. v-model \u53ea\u80fd\u4f5c\u7528\u4e8e\u5355\u4e2a\u5c5e\u6027\uff0c.sync \u53ef\u4f5c\u7528\u591a\u4e2a\u5c5e\u6027\u3002<\/li>\n
    2. v-model \u4e3b\u8981\u4f5c\u7528\u4e0e\u8868\u5355\u6ce8\u91cd\u503c\u7684\u6539\u53d8\uff0c.sync \u4e3b\u8981\u4f5c\u7528\u4e0e\u72b6\u6001\u7684\u6539\u53d8\uff08\u663e\u9690\uff09\u3002<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"
      \u7528\u6cd5\uff1a v-model \uff082.2.0+\uff09 <!–v-model\u5199\u6cd5–> <my...<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,20,3],"tags":[78,77,47],"class_list":["post-929","post","type-post","status-publish","format-standard","hentry","category-all","category-frontend","category-tech","tag-sync","tag-v-model","tag-vue"],"_links":{"self":[{"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=\/wp\/v2\/posts\/929","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=929"}],"version-history":[{"count":2,"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=\/wp\/v2\/posts\/929\/revisions"}],"predecessor-version":[{"id":1198,"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=\/wp\/v2\/posts\/929\/revisions\/1198"}],"wp:attachment":[{"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=929"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=929"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=929"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}