{"id":460,"date":"2026-06-05T14:53:52","date_gmt":"2026-06-05T06:53:52","guid":{"rendered":"https:\/\/mitongxue.cn\/?p=460"},"modified":"2026-06-17T15:05:47","modified_gmt":"2026-06-17T07:05:47","slug":"vue-%e5%92%8c-react-%e5%9c%a8%e7%88%b6%e5%ad%90%e7%bb%84%e4%bb%b6%e9%80%9a%e4%bf%a1%e4%b8%8a%e7%9a%84%e6%a0%b8%e5%bf%83%e5%8c%ba%e5%88%ab","status":"publish","type":"post","link":"https:\/\/mitongxue.cn\/index.php\/2026\/06\/05\/vue-%e5%92%8c-react-%e5%9c%a8%e7%88%b6%e5%ad%90%e7%bb%84%e4%bb%b6%e9%80%9a%e4%bf%a1%e4%b8%8a%e7%9a%84%e6%a0%b8%e5%bf%83%e5%8c%ba%e5%88%ab\/","title":{"rendered":"Vue \u548c React \u5728\u7236\u5b50\u7ec4\u4ef6\u901a\u4fe1\u4e0a\u7684\u6838\u5fc3\u533a\u522b"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Vue \u548c React \u5728\u7236\u5b50\u7ec4\u4ef6\u901a\u4fe1\u4e0a\u7684\u6838\u5fc3\u533a\u522b\u5728\u4e8e<strong>\u6570\u636e\u6d41\u5411\u7684\u8bbe\u8ba1\u54f2\u5b66<\/strong>\uff1aVue \u503e\u5411\u4e8e<strong>\u4e8b\u4ef6\u9a71\u52a8<\/strong>\uff08\u5b50\u7ec4\u4ef6\u4e3b\u52a8\u629b\u51fa\u4e8b\u4ef6\uff09\uff0c\u800c React \u503e\u5411\u4e8e<strong>\u56de\u8c03\u51fd\u6570\u9a71\u52a8<\/strong>\uff08\u7236\u7ec4\u4ef6\u628a\u51fd\u6570\u4f20\u7ed9\u5b50\u7ec4\u4ef6\u53bb\u8c03\u7528\uff09\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>1. \u7236\u7ec4\u4ef6\u5411\u5b50\u7ec4\u4ef6\u4f20\u9012\u6570\u636e\uff08\u7236 \u2192 \u5b50\uff09<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>\u6838\u5fc3\u533a\u522b<\/strong>\uff1a\u4e24\u8005\u90fd\u4f7f\u7528&nbsp;<code>props<\/code>\uff0c\u4f46 Vue \u6709\u4e25\u683c\u7684\u5355\u5411\u6570\u636e\u6d41\u9650\u5236\uff0cReact \u5219\u66f4\u52a0\u5bbd\u677e\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Vue \u5199\u6cd5<\/strong>\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><em>&lt;!-- \u7236\u7ec4\u4ef6 --><\/em>\n&lt;ChildComponent :message=\"msg\" \/>\n\n<em>&lt;!-- \u5b50\u7ec4\u4ef6 --><\/em>\n&lt;script setup>\nconst props = defineProps(&#91;'message'])\n<em>\/\/ \u6ce8\u610f\uff1aVue \u4e2d\u7edd\u5bf9\u4e0d\u80fd\u76f4\u63a5\u4fee\u6539 props\uff0c\u5426\u5219\u63a7\u5236\u53f0\u4f1a\u62a5\u8b66\u544a<\/em>\n<em>\/\/ props.message = 'new' <\/em>\n&lt;\/script><\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>React \u5199\u6cd5<\/strong>\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><em>\/\/ \u7236\u7ec4\u4ef6<\/em>\n&lt;ChildComponent message={msg} \/&gt;\n\n<em>\/\/ \u5b50\u7ec4\u4ef6<\/em>\nfunction ChildComponent({ message }) {\n  <em>\/\/ React \u4e2d\u867d\u7136\u4e5f\u4e0d\u5efa\u8bae\u76f4\u63a5\u4fee\u6539 props\uff0c\u4f46\u4e0d\u4f1a\u50cf Vue \u90a3\u6837\u5f3a\u5236\u62e6\u622a<\/em>\n  return &lt;p&gt;{message}&lt;\/p&gt;\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>2. \u5b50\u7ec4\u4ef6\u5411\u7236\u7ec4\u4ef6\u4f20\u9012\u6d88\u606f\/\u54cd\u5e94\u4e8b\u4ef6\uff08\u5b50 \u2192 \u7236\uff09<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>\u6838\u5fc3\u533a\u522b<\/strong>\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Vue<\/strong>\uff1a\u5b50\u7ec4\u4ef6\u901a\u8fc7\u00a0<code>emit<\/code>\u00a0<strong>\u4e3b\u52a8\u89e6\u53d1<\/strong>\u4e00\u4e2a\u81ea\u5b9a\u4e49\u4e8b\u4ef6\uff0c\u7236\u7ec4\u4ef6\u5728\u6807\u7b7e\u4e0a\u901a\u8fc7\u00a0<code>@\u4e8b\u4ef6\u540d<\/code>\u00a0\u76d1\u542c\u3002<\/li>\n\n\n\n<li><strong>React<\/strong>\uff1a\u7236\u7ec4\u4ef6\u901a\u8fc7 props \u5c06\u4e00\u4e2a<strong>\u56de\u8c03\u51fd\u6570<\/strong>\u4f20\u7ed9\u5b50\u7ec4\u4ef6\uff0c\u5b50\u7ec4\u4ef6\u5728\u5408\u9002\u7684\u65f6\u673a<strong>\u8c03\u7528<\/strong>\u8fd9\u4e2a\u51fd\u6570\u3002<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Vue \u5199\u6cd5<\/strong>\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><em>&lt;!-- \u5b50\u7ec4\u4ef6 Child.vue --&gt;<\/em>\n&lt;script setup&gt;\nconst emit = defineEmits(&#91;'send-msg'])\nconst handleClick = () =&gt; {\n  emit('send-msg', '\u6765\u81eaVue\u5b50\u7ec4\u4ef6\u7684\u6d88\u606f') <em>\/\/ \u4e3b\u52a8\u629b\u51fa\u4e8b\u4ef6<\/em>\n}\n&lt;\/script&gt;\n&lt;template&gt;\n  &lt;button @click=\"handleClick\"&gt;\u53d1\u9001\u6d88\u606f&lt;\/button&gt;\n&lt;\/template&gt;\n\n<em>&lt;!-- \u7236\u7ec4\u4ef6 Parent.vue --&gt;<\/em>\n&lt;template&gt;\n  <em>&lt;!-- \u76d1\u542c\u5b50\u7ec4\u4ef6\u629b\u51fa\u7684 send-msg \u4e8b\u4ef6 --&gt;<\/em>\n  &lt;Child @send-msg=\"handleReceive\" \/&gt;\n&lt;\/template&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>React \u5199\u6cd5<\/strong>\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><em>\/\/ \u5b50\u7ec4\u4ef6 Child.jsx<\/em>\nfunction Child({ onSendMsg }) {\n  const handleClick = () =&gt; {\n    onSendMsg('\u6765\u81eaReact\u5b50\u7ec4\u4ef6\u7684\u6d88\u606f') <em>\/\/ \u8c03\u7528\u7236\u7ec4\u4ef6\u4f20\u4e0b\u6765\u7684\u51fd\u6570<\/em>\n  }\n  return &lt;button onClick={handleClick}&gt;\u53d1\u9001\u6d88\u606f&lt;\/button&gt;\n}\n\n<em>\/\/ \u7236\u7ec4\u4ef6 Parent.jsx<\/em>\nfunction Parent() {\n  const handleReceive = (data) =&gt; {\n    console.log(data)\n  }\n  <em>\/\/ \u628a\u56de\u8c03\u51fd\u6570\u4f5c\u4e3a prop \u4f20\u7ed9\u5b50\u7ec4\u4ef6<\/em>\n  return &lt;Child onSendMsg={handleReceive} \/&gt;\n}<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>3. \u7236\u7ec4\u4ef6\u76f4\u63a5\u8c03\u7528\u5b50\u7ec4\u4ef6\u7684\u65b9\u6cd5\uff08\u7236 \u2192 \u5b50 \u8c03\u7528\uff09<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>\u6838\u5fc3\u533a\u522b<\/strong>\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Vue<\/strong>\uff1a\u4f7f\u7528\u00a0<code>ref<\/code>\u00a0\u83b7\u53d6\u5b50\u7ec4\u4ef6\u5b9e\u4f8b\uff0c\u914d\u5408\u00a0<code>defineExpose<\/code>\u00a0\u66b4\u9732\u65b9\u6cd5\u3002<\/li>\n\n\n\n<li><strong>React<\/strong>\uff1a\u4f7f\u7528\u00a0<code>useRef<\/code>\u00a0\u83b7\u53d6\u5b50\u7ec4\u4ef6\u5b9e\u4f8b\uff0c\u914d\u5408\u00a0<code>forwardRef<\/code>\u00a0\u548c\u00a0<code>useImperativeHandle<\/code>\u00a0\u66b4\u9732\u65b9\u6cd5\u3002<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Vue \u5199\u6cd5<\/strong>\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><em>&lt;!-- \u5b50\u7ec4\u4ef6 Child.vue --&gt;<\/em>\n&lt;script setup&gt;\nconst reset = () =&gt; console.log('Vue \u8868\u5355\u91cd\u7f6e')\n<em>\/\/ \u5fc5\u987b\u901a\u8fc7 defineExpose \u663e\u5f0f\u66b4\u9732\uff0c\u7236\u7ec4\u4ef6\u624d\u80fd\u8bbf\u95ee<\/em>\ndefineExpose({ reset }) \n&lt;\/script&gt;\n\n<em>&lt;!-- \u7236\u7ec4\u4ef6 Parent.vue --&gt;<\/em>\n&lt;script setup&gt;\nimport { ref } from 'vue'\nconst childRef = ref(null)\nconst triggerReset = () =&gt; childRef.value.reset() <em>\/\/ \u76f4\u63a5\u8c03\u7528<\/em>\n&lt;\/script&gt;\n&lt;template&gt;\n  &lt;Child ref=\"childRef\" \/&gt;\n  &lt;button @click=\"triggerReset\"&gt;\u91cd\u7f6e&lt;\/button&gt;\n&lt;\/template&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>React \u5199\u6cd5<\/strong>\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><em>\/\/ \u5b50\u7ec4\u4ef6 Child.jsx<\/em>\nimport { forwardRef, useImperativeHandle } from 'react'\n\n<em>\/\/ \u5fc5\u987b\u7528 forwardRef \u5305\u88f9<\/em>\nconst Child = forwardRef((props, ref) =&gt; {\n  const reset = () =&gt; console.log('React \u8868\u5355\u91cd\u7f6e')\n  <em>\/\/ \u901a\u8fc7 useImperativeHandle \u5c06\u65b9\u6cd5\u7ed1\u5b9a\u5230 ref \u4e0a<\/em>\n  useImperativeHandle(ref, () =&gt; ({ reset }))\n  return &lt;div&gt;Child&lt;\/div&gt;\n})\n\n<em>\/\/ \u7236\u7ec4\u4ef6 Parent.jsx<\/em>\nimport { useRef } from 'react'\n\nfunction Parent() {\n  const childRef = useRef()\n  const triggerReset = () =&gt; childRef.current.reset() <em>\/\/ \u901a\u8fc7 .current \u8c03\u7528<\/em>\n  return (\n    &lt;&gt;\n      &lt;Child ref={childRef} \/&gt;\n      &lt;button onClick={triggerReset}&gt;\u91cd\u7f6e&lt;\/button&gt;\n    &lt;\/&gt;\n  )\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Vue \u548c React \u5728\u7236\u5b50\u7ec4\u4ef6\u901a\u4fe1\u4e0a\u7684\u6838\u5fc3\u533a\u522b..<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,13,11],"tags":[],"class_list":["post-460","post","type-post","status-publish","format-standard","hentry","category-react-","category-vue","category-front"],"featured_image_urls":{"full":"","thumbnail":"","medium":"","medium_large":"","large":"","1536x1536":"","2048x2048":""},"author_info":{"info":["\u9648 \u67d0\u4eba"]},"category_info":"<a href=\"https:\/\/mitongxue.cn\/index.php\/category\/front\/react-%e5%89%8d%e7%ab%af\/\" rel=\"category tag\">React<\/a> <a href=\"https:\/\/mitongxue.cn\/index.php\/category\/front\/vue\/\" rel=\"category tag\">Vue<\/a> <a href=\"https:\/\/mitongxue.cn\/index.php\/category\/front\/\" rel=\"category tag\">\u524d\u7aef<\/a>","tag_info":"\u524d\u7aef","comment_count":"0","_links":{"self":[{"href":"https:\/\/mitongxue.cn\/index.php\/wp-json\/wp\/v2\/posts\/460","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mitongxue.cn\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mitongxue.cn\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mitongxue.cn\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mitongxue.cn\/index.php\/wp-json\/wp\/v2\/comments?post=460"}],"version-history":[{"count":1,"href":"https:\/\/mitongxue.cn\/index.php\/wp-json\/wp\/v2\/posts\/460\/revisions"}],"predecessor-version":[{"id":461,"href":"https:\/\/mitongxue.cn\/index.php\/wp-json\/wp\/v2\/posts\/460\/revisions\/461"}],"wp:attachment":[{"href":"https:\/\/mitongxue.cn\/index.php\/wp-json\/wp\/v2\/media?parent=460"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mitongxue.cn\/index.php\/wp-json\/wp\/v2\/categories?post=460"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mitongxue.cn\/index.php\/wp-json\/wp\/v2\/tags?post=460"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}