{"id":702,"date":"2024-01-05T09:33:06","date_gmt":"2024-01-05T01:33:06","guid":{"rendered":"http:\/\/ericw.top\/?p=702"},"modified":"2024-01-09T09:23:27","modified_gmt":"2024-01-09T01:23:27","slug":"vue-%e8%bf%9b%e9%98%b6%e8%af%ad%e6%b3%95","status":"publish","type":"post","link":"http:\/\/ericw.top\/?p=702","title":{"rendered":"Vue \u8fdb\u9636\u8bed\u6cd5"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\" id=\"toc-0\">v-model \u539f\u7406<\/h2>\n\n\n\n<p><strong>\u539f\u7406\uff1a<\/strong>v-model\u672c\u8d28\u4e0a\u662f\u4e00\u4e2a\u8bed\u6cd5\u7cd6\u3002<br>\u4f8b\u5982\u5e94\u7528\u5728\u8f93\u5165\u6846\u4e0a\uff0c\u5c31\u662f value\u5c5e\u6027 \u548c input\u4e8b\u4ef6 \u7684\u5408\u5199\u3002<\/p>\n\n\n\n<p><strong>\u4f5c\u7528\uff1a<\/strong>\u63d0\u4f9b\u6570\u636e\u7684\u53cc\u5411\u7ed1\u5b9a<\/p>\n\n\n\n<p>\u2460 \u6570\u636e\u53d8\uff0c\u89c6\u56fe\u8ddf\u7740\u53d8 <code class=\"prettyprint\" >:value<\/code><\/p>\n\n\n\n<p>\u2461 \u89c6\u56fe\u53d8\uff0c\u6570\u636e\u8ddf\u7740\u53d8 <code class=\"prettyprint\" >@input<\/code><\/p>\n\n\n\n<p><strong>\u6ce8\u610f\uff1a<\/strong><code class=\"prettyprint\" >$event<\/code> \u7528\u4e8e\u5728\u6a21\u677f\u4e2d\uff0c\u83b7\u53d6\u4e8b\u4ef6\u7684\u5f62\u53c2<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"225\" src=\"http:\/\/ericw.top\/wp-content\/uploads\/2024\/01\/image-35-1024x225.png\" alt=\"\" class=\"wp-image-703\" srcset=\"http:\/\/ericw.top\/wp-content\/uploads\/2024\/01\/image-35-1024x225.png 1024w, http:\/\/ericw.top\/wp-content\/uploads\/2024\/01\/image-35-300x66.png 300w, http:\/\/ericw.top\/wp-content\/uploads\/2024\/01\/image-35-768x169.png 768w, http:\/\/ericw.top\/wp-content\/uploads\/2024\/01\/image-35.png 1127w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"toc-1\">\u8868\u5355\u7c7b\u7ec4\u4ef6\u5c01\u88c5 &amp; v-model \u7b80\u5316\u4ee3\u7801<\/h2>\n\n\n\n<p>1\u3001\u8868\u5355\u7c7b\u7ec4\u4ef6 <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">\u5c01\u88c5<\/mark><\/strong> \u2192 \u5b9e\u73b0 \u5b50\u7ec4\u4ef6 \u548c \u7236\u7ec4\u4ef6\u6570\u636e \u7684 <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\"><strong>\u53cc\u5411\u7ed1\u5b9a<\/strong><\/mark><\/p>\n\n\n\n<p>\u2460 <strong>\u7236\u4f20\u5b50\uff1a<\/strong>\u6570\u636e \u5e94\u8be5\u662f\u7236\u7ec4\u4ef6 <code class=\"prettyprint\" >props<\/code> \u4f20\u9012 \u8fc7\u6765\u7684\uff0c\u62c6\u89e3 <code class=\"prettyprint\" >v-model<\/code> \u7ed1\u5b9a\u6570\u636e<\/p>\n\n\n\n<p>\u2461 <strong>\u5b50\u4f20\u7236\uff1a<\/strong>\u76d1\u542c\u8f93\u5165\uff0c\u5b50\u4f20\u7236\u4f20\u503c\u7ed9\u7236\u7ec4\u4ef6\u4fee\u6539<\/p>\n\n\n\n<p>2\u3001\u7236\u7ec4\u4ef6 v-model <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">\u7b80\u5316\u4ee3\u7801<\/mark><\/strong>\uff0c\u5b9e\u73b0 \u5b50\u7ec4\u4ef6 \u548c \u7236\u7ec4\u4ef6\u6570\u636e <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">\u53cc\u5411\u7ed1\u5b9a<\/mark><\/strong><\/p>\n\n\n\n<p>\u2460 <strong>\u5b50\u7ec4\u4ef6\u4e2d\uff1a<\/strong><code class=\"prettyprint\" >props <\/code>\u901a\u8fc7 <code class=\"prettyprint\" >value <\/code>\u63a5\u6536\uff0c\u4e8b\u4ef6\u89e6\u53d1 <code class=\"prettyprint\" >input<\/code><\/p>\n\n\n\n<p>\u2461 <strong>\u7236\u7ec4\u4ef6\u4e2d\uff1a<\/strong><code class=\"prettyprint\" >v-model<\/code> \u7ed9\u7ec4\u4ef6\u76f4\u63a5\u7ed1\u6570\u636e <code class=\"prettyprint\" > ( :value + @input )<\/code><\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img decoding=\"async\" width=\"814\" height=\"367\" src=\"http:\/\/ericw.top\/wp-content\/uploads\/2024\/01\/image-36.png\" alt=\"\" class=\"wp-image-704\" style=\"width:736px;height:auto\" srcset=\"http:\/\/ericw.top\/wp-content\/uploads\/2024\/01\/image-36.png 814w, http:\/\/ericw.top\/wp-content\/uploads\/2024\/01\/image-36-300x135.png 300w, http:\/\/ericw.top\/wp-content\/uploads\/2024\/01\/image-36-768x346.png 768w\" sizes=\"(max-width: 814px) 100vw, 814px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img decoding=\"async\" width=\"384\" height=\"373\" src=\"http:\/\/ericw.top\/wp-content\/uploads\/2024\/01\/image-37.png\" alt=\"\" class=\"wp-image-705\" style=\"width:295px;height:auto\" srcset=\"http:\/\/ericw.top\/wp-content\/uploads\/2024\/01\/image-37.png 384w, http:\/\/ericw.top\/wp-content\/uploads\/2024\/01\/image-37-300x291.png 300w\" sizes=\"(max-width: 384px) 100vw, 384px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"toc-2\">.sync\u4fee\u9970\u7b26<\/h2>\n\n\n\n<p><strong>\u4f5c\u7528\uff1a<\/strong>\u53ef\u4ee5\u5b9e\u73b0 <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">\u5b50\u7ec4\u4ef6<\/mark><\/strong> \u4e0e <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">\u7236\u7ec4\u4ef6\u6570\u636e <\/mark><\/strong>\u7684 <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">\u53cc\u5411\u7ed1\u5b9a<\/mark><\/strong>\uff0c\u7b80\u5316\u4ee3\u7801<\/p>\n\n\n\n<p><strong>\u7279\u70b9\uff1a<\/strong>prop\u5c5e\u6027\u540d\uff0c\u53ef\u4ee5<strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">\u81ea\u5b9a\u4e49<\/mark><\/strong>\uff0c\u975e\u56fa\u5b9a\u4e3a <code class=\"prettyprint\" >value<\/code><\/p>\n\n\n\n<p><strong>\u573a\u666f\uff1a<\/strong>\u5c01\u88c5\u5f39\u6846\u7c7b\u7684\u57fa\u7840\u7ec4\u4ef6\uff0c <code class=\"prettyprint\" >visible\u5c5e\u6027<\/code> true\u663e\u793a false\u9690\u85cf<\/p>\n\n\n\n<p><strong>\u672c\u8d28\uff1a<\/strong>\u5c31\u662f <code class=\"prettyprint\" >:\u5c5e\u6027\u540d<\/code> \u548c <code class=\"prettyprint\" >@update:\u5c5e\u6027\u540d<\/code> \u5408\u5199<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"prettyprint\" >&lt;BaseDialog :visible.sync=&quot;isShow&quot; \/&gt;\n--------------------------------------\n&lt;BaseDialog\n  :visible=&quot;isShow&quot; \n  @update:visible=&quot;isShow = $event&quot;\n\/&gt;<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"prettyprint\" >props: {\n  visible: Boolean\n},\nthis.$emit(&#039;update:visible&#039;, false)<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"654\" height=\"339\" src=\"http:\/\/ericw.top\/wp-content\/uploads\/2024\/01\/image-38.png\" alt=\"\" class=\"wp-image-706\" srcset=\"http:\/\/ericw.top\/wp-content\/uploads\/2024\/01\/image-38.png 654w, http:\/\/ericw.top\/wp-content\/uploads\/2024\/01\/image-38-300x156.png 300w\" sizes=\"(max-width: 654px) 100vw, 654px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"toc-3\">ref \u548c $refs<\/h2>\n\n\n\n<p><strong>\u4f5c\u7528\uff1a<\/strong>\u5229\u7528 ref \u548c $refs \u53ef\u4ee5\u7528\u4e8e <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\"><strong>\u83b7\u53d6 dom \u5143\u7d20, \u6216 \u7ec4\u4ef6\u5b9e\u4f8b<\/strong><\/mark><\/p>\n\n\n\n<p><strong>\u7279\u70b9\uff1a<\/strong>\u67e5\u627e\u8303\u56f4 \u2192 <strong>\u5f53\u524d\u7ec4\u4ef6\u5185 (\u66f4\u7cbe\u786e\u7a33\u5b9a)<\/strong><\/p>\n\n\n\n<p><strong>\u2460 \u83b7\u53d6 dom\uff1a<\/strong><\/p>\n\n\n\n<p>1. \u76ee\u6807\u6807\u7b7e \u2013 \u6dfb\u52a0 ref \u5c5e\u6027<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"prettyprint\" >&lt;div ref=&quot;chartRef&quot;&gt;\u6211\u662f\u6e32\u67d3\u56fe\u8868\u7684\u5bb9\u5668&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>2. \u6070\u5f53\u65f6\u673a, \u901a\u8fc7 this.$refs.xxx, \u83b7\u53d6\u76ee\u6807\u6807\u7b7e<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"prettyprint\" >mounted () {\n\nconsole.log(this.$refs.chartRef)\n\n},<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"659\" height=\"499\" src=\"http:\/\/ericw.top\/wp-content\/uploads\/2024\/01\/image-39.png\" alt=\"\" class=\"wp-image-707\" srcset=\"http:\/\/ericw.top\/wp-content\/uploads\/2024\/01\/image-39.png 659w, http:\/\/ericw.top\/wp-content\/uploads\/2024\/01\/image-39-300x227.png 300w\" sizes=\"(max-width: 659px) 100vw, 659px\" \/><\/figure>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"prettyprint\" >\/\/ \u57fa\u4e8e\u51c6\u5907\u597d\u7684dom\uff0c\u521d\u59cb\u5316echarts\u5b9e\u4f8b\nconst myChart = echarts.init(document.querySelector(&#039;.box&#039;));<\/code><\/pre>\n\n\n\n<p><strong>\u2461 \u83b7\u53d6\u7ec4\u4ef6\uff1a<\/strong><\/p>\n\n\n\n<p>1. \u76ee\u6807\u7ec4\u4ef6 \u2013 \u6dfb\u52a0 ref \u5c5e\u6027<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"prettyprint\" >&lt;BaseForm ref=&quot;baseForm&quot;&gt;&lt;\/BaseForm&gt;<\/code><\/pre>\n\n\n\n<p>2. \u6070\u5f53\u65f6\u673a, \u901a\u8fc7 this.$refs.xxx, \u83b7\u53d6\u76ee\u6807\u7ec4\u4ef6\uff0c<\/p>\n\n\n\n<p>\u5c31\u53ef\u4ee5<strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">\u8c03\u7528\u7ec4\u4ef6\u5bf9\u8c61\u91cc\u9762\u7684\u65b9\u6cd5<\/mark><\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"prettyprint\" >this.$refs.baseForm.\u7ec4\u4ef6\u65b9\u6cd5()\n<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"639\" height=\"245\" src=\"http:\/\/ericw.top\/wp-content\/uploads\/2024\/01\/image-40.png\" alt=\"\" class=\"wp-image-708\" srcset=\"http:\/\/ericw.top\/wp-content\/uploads\/2024\/01\/image-40.png 639w, http:\/\/ericw.top\/wp-content\/uploads\/2024\/01\/image-40-300x115.png 300w\" sizes=\"(max-width: 639px) 100vw, 639px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"toc-4\">Vue\u5f02\u6b65\u66f4\u65b0\u3001$nextTick<\/h2>\n\n\n\n<p><strong>\u9700\u6c42\uff1a\u7f16\u8f91\u6807\u9898, \u7f16\u8f91\u6846\u81ea\u52a8\u805a\u7126<\/strong><\/p>\n\n\n\n<p>1. \u70b9\u51fb\u7f16\u8f91\uff0c\u663e\u793a\u7f16\u8f91\u6846<\/p>\n\n\n\n<p>2. \u8ba9\u7f16\u8f91\u6846\uff0c<strong>\u7acb\u523b\u83b7\u53d6\u7126\u70b9<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"prettyprint\" >this.isShowEdit = true \/\/ \u663e\u793a\u8f93\u5165\u6846\n\nthis.$refs.inp.focus() \/\/ \u83b7\u53d6\u7126\u70b9<\/code><\/pre>\n\n\n\n<p>\u95ee\u9898\uff1a\"\u663e\u793a\u4e4b\u540e\"\uff0c\u7acb\u523b\u83b7\u53d6\u7126\u70b9\u662f\u4e0d\u80fd\u6210\u529f\u7684\uff01<\/p>\n\n\n\n<p><strong>\u539f\u56e0\uff1a<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-green-cyan-color\">Vue \u662f \u5f02\u6b65\u66f4\u65b0 DOM (\u63d0\u5347\u6027\u80fd)<\/mark><\/strong><\/p>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-media-text is-stacked-on-mobile\"><figure class=\"wp-block-media-text__media\"><img decoding=\"async\" width=\"616\" height=\"504\" src=\"http:\/\/ericw.top\/wp-content\/uploads\/2024\/01\/image-41.png\" alt=\"\" class=\"wp-image-709 size-full\" srcset=\"http:\/\/ericw.top\/wp-content\/uploads\/2024\/01\/image-41.png 616w, http:\/\/ericw.top\/wp-content\/uploads\/2024\/01\/image-41-300x245.png 300w\" sizes=\"(max-width: 616px) 100vw, 616px\" \/><\/figure><div class=\"wp-block-media-text__content\">\n<p>$nextTick\uff1a\u7b49 DOM \u66f4\u65b0\u540e, \u624d\u4f1a\u89e6\u53d1\u6267\u884c\u6b64\u65b9\u6cd5\u91cc\u7684\u51fd\u6570\u4f53<br><strong>\u8bed\u6cd5: <\/strong> this.$nextTick(\u51fd\u6570\u4f53)<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"prettyprint\" >this.$nextTick(() =&gt; {\n\nthis.$refs.inp.focus()\n\n})<\/code><\/pre>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>v-model \u539f\u7406 \u539f\u7406\uff1av-model\u672c\u8d28\u4e0a\u662f\u4e00\u4e2a\u8bed\u6cd5\u7cd6\u3002\u4f8b\u5982\u5e94\u7528\u5728\u8f93\u5165\u6846\u4e0a\uff0c\u5c31\u662f value\u5c5e\u6027 \u548c i [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":707,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17,5],"tags":[],"_links":{"self":[{"href":"http:\/\/ericw.top\/index.php?rest_route=\/wp\/v2\/posts\/702"}],"collection":[{"href":"http:\/\/ericw.top\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/ericw.top\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/ericw.top\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/ericw.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=702"}],"version-history":[{"count":2,"href":"http:\/\/ericw.top\/index.php?rest_route=\/wp\/v2\/posts\/702\/revisions"}],"predecessor-version":[{"id":716,"href":"http:\/\/ericw.top\/index.php?rest_route=\/wp\/v2\/posts\/702\/revisions\/716"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/ericw.top\/index.php?rest_route=\/wp\/v2\/media\/707"}],"wp:attachment":[{"href":"http:\/\/ericw.top\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=702"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/ericw.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=702"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/ericw.top\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=702"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}