{"id":1489,"date":"2022-08-18T22:57:18","date_gmt":"2022-08-18T14:57:18","guid":{"rendered":"https:\/\/zhuxinyong.com\/?p=1489"},"modified":"2022-08-19T08:26:27","modified_gmt":"2022-08-19T00:26:27","slug":"vue-zu-jian-xun-huan-yin-yong","status":"publish","type":"post","link":"https:\/\/zhuxinyong.com\/?p=1489","title":{"rendered":"Vue \u7ec4\u4ef6\u5faa\u73af\u5f15\u7528"},"content":{"rendered":"<p>\u6700\u8fd1\u5927\u5c4f\u7ec4\u4ef6\u5185\u8981\u65b0\u589e\u4e00\u4e2a\u7ec4\u4ef6\uff1a\u753b\u5e03\u7ec4\u4ef6\uff0c\u53ef\u4ee5\u628a\u53e6\u4e00\u4e2a\u5927\u5c4f\u7684\u7ec4\u4ef6\u6e32\u67d3\u5230\u5176\u4e2d\u3002\u601d\u8def\u662f\uff0c\u65e2\u7136\u9884\u89c8\u7684\u65f6\u5019\u53ef\u4ee5\u5728\u5f39\u6846\u5185\u53ef\u4ee5\u628a\u5927\u5c4f\u6e32\u67d3\u51fa\u6765\uff0c\u90a3\u5c31\u53ef\u4ee5\u5728\u6307\u5b9a\u7684\u7ec4\u4ef6\u5185\u6e32\u67d3\u51fa\u6765\u3002<\/p>\n<p>\u5f39\u6846\u9884\u89c8\u4ee3\u7801\uff1a\uff08AbsRun \u662f\u9884\u89c8\u7ec4\u4ef6\uff09<\/p>\n<pre><code class=\"language-plain_text\">&lt;dialog&gt;\n    &lt;AbsRun :id='id'&gt;&lt;\/AbsRun&gt;\n&lt;\/dialog&gt;\n<\/code><\/pre>\n<p>\u6211\u8bbe\u60f3\u7684\u753b\u5e03\u7ec4\u4ef6\u4ee3\u7801\uff1a<\/p>\n<pre><code class=\"language-plain_text\">&lt;div id='canvas-panel'&gt;\n    &lt;AbsRun :id=\"id\"&gt;&lt;\/AbsRun&gt;\n&lt;\/div&gt;\n<\/code><\/pre>\n<p>\u8fd0\u884c\u540e\u53d1\u73b0\u62a5\u9519\uff1a<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/zhuxinyong.com\/wp-content\/uploads\/2022\/08\/16608347221422.jpg\" alt=\"\" \/><\/p>\n<p>\u770b\u4e0a\u9762\u7684\u62a5\u9519\uff0c\u68b3\u7406\u7684\u597d\u4e45\u624d\u53d1\u73b0\u4ea7\u751f\u4e86\u7ec4\u4ef6\u5faa\u73af\u5f15\u7528\uff1a<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/zhuxinyong.com\/wp-content\/uploads\/2022\/08\/16608355142976.jpg\" alt=\"\" \/><\/p>\n<p>\u9996\u5148\u753b\u5e03\u7ec4\u4ef6\u9700\u8981\u4f7f\u7528 AbsRun \u7ec4\u4ef6\uff0c\u6240\u4ee5\u4ee3\u7801\u5982\u4e0b\uff1a<\/p>\n<pre><code class=\"language-plain_text\">\/\/ \u753b\u5e03\u7ec4\u4ef6\n\nimport AbsRun from '..\/abs-run.vue'\n\ncomponents:{\n    AbsRun,\n}\n<\/code><\/pre>\n<p>AbsRun \u7ec4\u4ef6\u662f\u9884\u89c8\u7684\uff0c\u6240\u4ee5\u53c8\u5f97\u9700\u8981\u6ce8\u518c\u6240\u6709\u7684\u7ec4\u4ef6\uff0c\u5f53\u7136\u5305\u62ec\u753b\u5e03\u7ec4\u4ef6\uff1a<\/p>\n<pre><code class=\"language-plain_text\">import xxx from '..\/components\/xxx.vue'\nimport CanvasPanel from '..\/components\/canvas-panel.vue'\n\ncomponents:{\n    xxx,\n    CanvasPanel,\n}\n<\/code><\/pre>\n<p>\u81f3\u6b64\u5c31\u4ea7\u751f\u4e86\u5faa\u73af\u5f15\u7528\u95ee\u9898\uff0c\u90a3\u5982\u4f55\u89e3\u51b3\u5462\uff1f<\/p>\n<p>\u4e3a\u4e86\u89e3\u91ca\u8fd9\u91cc\u53d1\u751f\u4e86\u4ec0\u4e48\uff0c\u6211\u4eec\u5148\u628a\u4e24\u4e2a\u7ec4\u4ef6\u79f0\u4e3a A \u548c B\u3002\u6a21\u5757\u7cfb\u7edf\u53d1\u73b0\u5b83\u9700\u8981 A\uff0c\u4f46\u662f\u9996\u5148 A \u4f9d\u8d56 B\uff0c\u4f46\u662f B \u53c8\u4f9d\u8d56 A\uff0c\u4f46\u662f A \u53c8\u4f9d\u8d56 B\uff0c\u5982\u6b64\u5f80\u590d\u3002\u8fd9\u53d8\u6210\u4e86\u4e00\u4e2a\u5faa\u73af\uff0c\u4e0d\u77e5\u9053\u5982\u4f55\u4e0d\u7ecf\u8fc7\u5176\u4e2d\u4e00\u4e2a\u7ec4\u4ef6\u800c\u5b8c\u5168\u89e3\u6790\u51fa\u53e6\u4e00\u4e2a\u7ec4\u4ef6\u3002\u4e3a\u4e86\u89e3\u51b3\u8fd9\u4e2a\u95ee\u9898\uff0c\u6211\u4eec\u9700\u8981\u7ed9\u6a21\u5757\u7cfb\u7edf\u4e00\u4e2a\u70b9\uff0c\u5728\u90a3\u91cc\u201cA \u53cd\u6b63\u662f\u9700\u8981 B \u7684\uff0c\u4f46\u662f\u6211\u4eec\u4e0d\u9700\u8981\u5148\u89e3\u6790 B\u3002\u201d<\/p>\n<p>\u5728\u6211\u4eec\u7684\u4f8b\u5b50\u4e2d\uff0c\u628a\u00a0 &lt;tree-folder&gt; \u7ec4\u4ef6\u8bbe\u4e3a\u4e86\u90a3\u4e2a\u70b9\u3002\u6211\u4eec\u77e5\u9053\u90a3\u4e2a\u4ea7\u751f\u6096\u8bba\u7684\u5b50\u7ec4\u4ef6\u662f &lt;tree-folder-contents&gt; \u00a0\u7ec4\u4ef6\uff0c\u6240\u4ee5\u6211\u4eec\u4f1a\u7b49\u5230\u751f\u547d\u5468\u671f\u94a9\u5b50 beforeCreate \u65f6\u53bb\u6ce8\u518c\u5b83\uff1a<\/p>\n<pre><code class=\"language-plain_text\">beforeCreate: function () {\n  this.$options.components.TreeFolderContents = require('.\/tree-folder-contents.vue').default\n}\n<\/code><\/pre>\n<p>\u6216\uff1a<\/p>\n<pre><code class=\"language-plain_text\">components: {\n  TreeFolderContents: () =&gt; import('.\/tree-folder-contents.vue')\n}\n<\/code><\/pre>\n<p>\u90a3\u5728\u6211\u7684\u8fd9\u79cd\u573a\u666f\u4e0b\uff0c\u753b\u5e03\u7ec4\u4ef6\u5c31\u662f\u4ea7\u751f\u6096\u8bba\u7684\u5b50\u7ec4\u4ef6\uff0c\u6240\u4ee5\u7b49\u5230\u751f\u547d\u5468\u671f\u94a9\u5b50 beforeCreate \u65f6\u518d\u53bb\u6ce8\u518c AbsRun:<\/p>\n<pre><code class=\"language-plain_text\">beforeCreate(){\n  this.$options.components.AbsRun = () =&gt; import('..\/abs-run')\n},\n<\/code><\/pre>\n<p>\u53c2\u8003\uff1a<\/p>\n<ol>\n<li><a href=\"https:\/\/v2.cn.vuejs.org\/v2\/guide\/components-edge-cases.html#%E7%BB%84%E4%BB%B6%E4%B9%8B%E9%97%B4%E7%9A%84%E5%BE%AA%E7%8E%AF%E5%BC%95%E7%94%A8\" target=\"_blank\" rel=\"noopener\">https:\/\/v2.cn.vuejs.org\/v2\/guide\/components-edge-cases.html#%E7%BB%84%E4%BB%B6%E4%B9%8B%E9%97%B4%E7%9A%84%E5%BE%AA%E7%8E%AF%E5%BC%95%E7%94%A8<\/a><\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"<p>\u6700\u8fd1\u5927\u5c4f\u7ec4\u4ef6\u5185\u8981\u65b0\u589e\u4e00\u4e2a\u7ec4\u4ef6\uff1a\u753b\u5e03\u7ec4\u4ef6\uff0c\u53ef\u4ee5\u628a\u53e6\u4e00\u4e2a\u5927\u5c4f\u7684\u7ec4\u4ef6\u6e32\u67d3\u5230\u5176\u4e2d\u3002\u601d\u8def\u662f\uff0c\u65e2\u7136\u9884\u89c8\u7684\u65f6\u5019\u53ef\u4ee5&#46;&#46;&#46;<\/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":[54,209,208],"class_list":["post-1489","post","type-post","status-publish","format-standard","hentry","category-all","category-frontend","category-tech","tag-54","tag-209","tag-208"],"_links":{"self":[{"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=\/wp\/v2\/posts\/1489","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=1489"}],"version-history":[{"count":3,"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=\/wp\/v2\/posts\/1489\/revisions"}],"predecessor-version":[{"id":1500,"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=\/wp\/v2\/posts\/1489\/revisions\/1500"}],"wp:attachment":[{"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1489"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1489"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1489"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}