{"id":2023,"date":"2021-09-01T15:53:52","date_gmt":"2021-09-01T07:53:52","guid":{"rendered":"https:\/\/www.yusian.com\/blog\/?p=2023"},"modified":"2021-09-01T15:58:30","modified_gmt":"2021-09-01T07:58:30","slug":"provide-inject%e7%9a%84%e5%9f%ba%e6%9c%ac%e4%bd%bf%e7%94%a8","status":"publish","type":"post","link":"https:\/\/www.yusian.com\/blog\/javascript\/2021\/09\/01\/1553522023.html","title":{"rendered":"Provide\/Inject\u7684\u57fa\u672c\u4f7f\u7528"},"content":{"rendered":"<h1>1\u3001\u7b80\u5355\u4ecb\u7ecd<\/h1>\n<ul>\n<li>\u4ece\u529f\u80fd\u4e0a\u6765\u8bb2\uff0c\u4ed6\u7c7b\u4f3cprops\u7684\u4f20\u503c\uff0cprovide\u63d0\u4f9b\uff0cinject\u63a5\u6536\uff1b<\/p>\n<\/li>\n<li>\n<p>\u6709\u4e86props\u4e3a\u4ec0\u4e48\u8fd8\u9700\u8981\u8fd9\u4e1c\u897f\uff1f\u56e0\u4e3a\u5982\u679c\u662f\u4f20\u503c\u7ed9\u5b59\u5b50props\u5c31\u6ca1\u90a3\u4e48\u65b9\u4fbf\u4e86\uff0c\u5982\u679c\u662f\u4f20\u7ed9\u5b59\u5b50\u7684\u5b59\u5b50\u5462\uff0c\u90a3\u5c31\u66f4\u9ebb\u70e6\u4e86\uff0c\u4e00\u7ea7\u4e00\u7ea7\u4f20\u592a\u6076\u5fc3\uff1b<\/p>\n<\/li>\n<li>\n<p>\u7b80\u5355\u4e00\u70b9\u7406\u89e3\uff1a<\/p>\n<blockquote><p>\n  Provide\uff1a\u6211\u53ea\u662f\u5c06\u6570\u636e\u629b\u51fa\u53bb\uff0c\u7231\u8c01\u7528\u8c01\u7528\uff1b<\/p>\n<p>  Inject\uff1a\u6211\u53ea\u662f\u9700\u8981\u8fd9\u4e2a\u503c\uff0c\u8c01\u7ed9\u90fd\u884c\uff1b\n<\/p><\/blockquote>\n<\/li>\n<\/ul>\n<h1>2\u3001\u4f7f\u7528\u8bf4\u660e<\/h1>\n<ul>\n<li>provide\u901a\u8fc7\u5bf9\u8c61\u6216\u51fd\u6570\u8fd4\u56de\u5bf9\u8c61\u7684\u65b9\u5f0f\u5c06\u6570\u636e\u63d0\u4f9b\u51fa\u6765\uff1b<\/p>\n<\/li>\n<li>\n<p>provide\u63d0\u4f9b\u51fa\u6765\u7684\u6570\u636e\u4e0d\u652f\u6301\u54cd\u5e94\u5f0f\uff1b<\/p>\n<\/li>\n<li>\n<p>inject\u901a\u8fc7\u5b57\u7b26\u4e32\u6570\u7ec4\u7684\u65b9\u5f0f\u6ce8\u518c\u4f7f\u7528\u6216\u901a\u8fc7\u5bf9\u8c61\u7684\u65b9\u5f0f<\/p>\n<pre><code class=\"language-javascript line-numbers\">{\n  key: {\n      from: 'provide\u4e2d\u7684key',\n      default: '\u521d\u59cb\u503c'\n  }\n}\n<\/code><\/pre>\n<\/li>\n<li>\u53ef\u4ee5\u4f7f\u7528ES6\u4e2d\u7684Symbol\u505a\u4e3a\u5065\uff0c\u4f46inject\u4e2d\u6ce8\u518c\u65f6\u9700\u8981\u4f7f\u7528\u5bf9\u8c61\u7684\u65b9\u5f0f\uff1b<\/p>\n<\/li>\n<\/ul>\n<h2>2.1\u3001\u7b80\u5355\u4f7f\u7528<\/h2>\n<blockquote>\n<p>provide \u901a\u8fc7\u5bf9\u8c61\u63d0\u4f9b\u503c<\/p>\n<pre><code class=\"language-javascript line-numbers\">provide: {\n  message: \"Message from grandfather\",\n},\n<\/code><\/pre>\n<p>  inject \u901a\u8fc7\u5b57\u7b26\u4e32\u6570\u7ec4\u63a5\u6536<\/p>\n<pre><code class=\"language-javascript line-numbers\">inject: [\"message\"],\n<\/code><\/pre>\n<\/blockquote>\n<p>Grandfather.vue<\/p>\n<pre><code class=\"language-javascript line-numbers\">&lt;template&gt;\n  &lt;div class=\"container\"&gt;\n    GrandFather\n    &lt;father \/&gt;\n  &lt;\/div&gt;\n&lt;\/template&gt;\n&lt;script&gt;\nimport Father from \".\/Father.vue\";\nexport default {\n  name: \"GrandFather\",\n  provide: {\n    message: \"Message from grandfather\",\n  },\n  components: { Father },\n};\n&lt;\/script&gt;\n&lt;style lang=\"scss\" scoped&gt;\n&lt;\/style&gt;\n<\/code><\/pre>\n<p>Father.vue<\/p>\n<pre><code class=\"language-javascript line-numbers\">&lt;template&gt;\n  &lt;div class=\"container\"&gt;\n    Father\n    &lt;son \/&gt;\n  &lt;\/div&gt;\n&lt;\/template&gt;\n&lt;script&gt;\nimport Son from \".\/Son.vue\";\nexport default {\n  name: \"Father\",\n  components: { Son },\n};\n&lt;\/script&gt;\n&lt;style lang=\"scss\" scoped&gt;\n&lt;\/style&gt;\n<\/code><\/pre>\n<p>Son.vue<\/p>\n<pre><code class=\"language-javascript line-numbers\">&lt;template&gt;\n  &lt;div class=\"container\"&gt;Message: {{ message }}&lt;\/div&gt;\n&lt;\/template&gt;\n&lt;script&gt;\nexport default {\n  name: \"Son\",\n  inject: [\"message\"],\n};\n&lt;\/script&gt;\n&lt;style lang=\"scss\" scoped&gt;\n&lt;\/style&gt;\n<\/code><\/pre>\n<p>\u8fd0\u884c\u7ed3\u679c\uff1a<\/p>\n<pre><code class=\"language-text line-numbers\">GrandFather\nFather\nMessage: Message from grandfather\n<\/code><\/pre>\n<h2>2.2\u3001\u9ad8\u7ea7\u4f7f\u7528<\/h2>\n<blockquote><p>\n  provide\u901a\u8fc7\u51fd\u6570\u8fd4\u56de\u5bf9\u8c61\u7684\u65b9\u5f0f\u63d0\u4f9b\u503c<\/p>\n<pre><code class=\"language-javascript line-numbers\">provide() {\n    return {\n      [Symbol.for(\"message\")]: this.message,\n    };\n},\n<\/code><\/pre>\n<p>  inject\u901a\u8fc7\u5bf9\u8c61\u65b9\u5f0f\u63a5\u6536<\/p>\n<pre><code class=\"language-javascript line-numbers\">inject: {\n    \/\/ \u672c\u5730\u4f7f\u7528\u7684\u5c5e\u6027\u540d\n    message: {\n      from: Symbol.for(\"message\"), \/\/ inject\u4e2d\u63a5\u6536\u7684\u540d\u5b57\n      default: \"Default message\", \/\/ \u5982\u679c\u6ca1\u6709\u5219\u4f7f\u7528default\u4e2d\u7684\u503c\n    },\n},\n<\/code><\/pre>\n<p>  \u4f7f\u7528Symbol\u505a\u4e3a\u4f20\u9012\u7684\u5065\n<\/p><\/blockquote>\n<p>GrandFather.vue<\/p>\n<pre><code class=\"language-javascript line-numbers\">&lt;template&gt;\n  &lt;div class=\"container\"&gt;\n    GrandFather\n    &lt;father \/&gt;\n  &lt;\/div&gt;\n&lt;\/template&gt;\n&lt;script&gt;\nimport Father from \".\/Father.vue\";\nexport default {\n  name: \"GrandFather\",\n  provide() {\n    return {\n      [Symbol.for(\"message\")]: this.message,\n    };\n  },\n  data() {\n    return {\n      message: \"Message from GrandFather use Symbol\",\n    };\n  },\n  components: { Father },\n};\n&lt;\/script&gt;\n&lt;style lang=\"scss\" scoped&gt;\n&lt;\/style&gt;\n<\/code><\/pre>\n<p>Father.vue<\/p>\n<pre><code class=\"language-javascript line-numbers\">&lt;template&gt;\n  &lt;div class=\"container\"&gt;\n    Father\n    &lt;son \/&gt;\n  &lt;\/div&gt;\n&lt;\/template&gt;\n&lt;script&gt;\nimport Son from \".\/Son.vue\";\nexport default {\n  name: \"Father\",\n  components: { Son },\n};\n&lt;\/script&gt;\n&lt;style lang=\"scss\" scoped&gt;\n&lt;\/style&gt;\n<\/code><\/pre>\n<p>Son.vue<\/p>\n<pre><code class=\"language-javascript line-numbers\">&lt;template&gt;\n  &lt;div class=\"container\"&gt;Message: {{ message }}&lt;\/div&gt;\n&lt;\/template&gt;\n&lt;script&gt;\nexport default {\n  name: \"Son\",\n  inject: {\n    \/\/ \u672c\u5730\u4f7f\u7528\u7684\u5c5e\u6027\u540d\n    message: {\n      from: Symbol.for(\"message\"), \/\/ inject\u4e2d\u63a5\u6536\u7684\u540d\u5b57\n      default: \"Default message\", \/\/ \u5982\u679c\u6ca1\u6709\u5219\u4f7f\u7528default\u4e2d\u7684\u503c\n    },\n  },\n};\n&lt;\/script&gt;\n&lt;style lang=\"scss\" scoped&gt;\n&lt;\/style&gt;\n<\/code><\/pre>\n<p>\u6267\u884c\u7ed3\u679c\uff1a<\/p>\n<pre><code class=\"language-text line-numbers\">GrandFather\nFather\nMessage: Message from GrandFather use Symbol\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>1\u3001\u7b80\u5355\u4ecb\u7ecd \u4ece\u529f\u80fd\u4e0a\u6765\u8bb2\uff0c\u4ed6\u7c7b\u4f3cprops\u7684\u4f20\u503c\uff0cprovide\u63d0\u4f9b\uff0cinject\u63a5\u6536\uff1b \u6709\u4e86props\u4e3a\u4ec0\u4e48\u8fd8\u9700\u8981\u8fd9\u4e1c\u897f\uff1f\u56e0\u4e3a\u5982\u679c\u662f\u4f20\u503c\u7ed9\u5b59\u5b50props\u5c31\u6ca1\u90a3\u4e48\u65b9\u4fbf\u4e86\uff0c\u5982\u679c\u662f\u4f20\u7ed9\u5b59\u5b50\u7684\u5b59\u5b50\u5462\uff0c\u90a3\u5c31\u66f4\u9ebb\u70e6\u4e86\uff0c\u4e00\u7ea7\u4e00\u7ea7\u4f20\u592a\u6076\u5fc3\uff1b \u7b80\u5355\u4e00\u70b9\u7406\u89e3\uff1a Provide\uff1a\u6211\u53ea\u662f\u5c06\u6570\u636e\u629b\u51fa\u53bb\uff0c\u7231\u8c01\u7528\u8c01\u7528\uff1b Inject\uff1a\u6211\u53ea\u662f\u9700\u8981\u8fd9\u4e2a\u503c\uff0c\u8c01\u7ed9\u90fd\u884c\uff1b 2\u3001\u4f7f\u7528\u8bf4\u660e provide\u901a\u8fc7\u5bf9\u8c61\u6216\u51fd\u6570\u8fd4\u56de\u5bf9\u8c61\u7684\u65b9\u5f0f\u5c06\u6570\u636e\u63d0\u4f9b\u51fa\u6765\uff1b provide\u63d0\u4f9b\u51fa\u6765\u7684\u6570\u636e\u4e0d\u652f\u6301\u54cd\u5e94\u5f0f\uff1b inject\u901a\u8fc7\u5b57\u7b26\u4e32\u6570\u7ec4\u7684\u65b9\u5f0f\u6ce8\u518c\u4f7f\u7528\u6216\u901a\u8fc7\u5bf9\u8c61\u7684\u65b9\u5f0f { key: { from: &#8216;provide\u4e2d\u7684key&#8217;, default: &#8216;\u521d\u59cb\u503c&#8217; } } \u53ef\u4ee5\u4f7f\u7528ES6\u4e2d\u7684Symbol\u505a\u4e3a\u5065\uff0c\u4f46inject\u4e2d\u6ce8\u518c\u65f6\u9700\u8981\u4f7f\u7528\u5bf9\u8c61\u7684\u65b9\u5f0f\uff1b 2.1\u3001\u7b80\u5355\u4f7f\u7528 provide \u901a\u8fc7\u5bf9\u8c61\u63d0\u4f9b\u503c provide: { message: &#8220;Message from grandfather&#8221;, }, inject \u901a\u8fc7\u5b57\u7b26\u4e32\u6570\u7ec4\u63a5\u6536 inject: [&#8220;message&#8221;], Grandfather.vue &lt;template&gt; &lt;div class=&#8221;container&#8221;&gt; GrandFather &lt;father \/&gt; &lt;\/div&gt; &lt;\/template&gt; &lt;script&gt; import Father from &#8220;.\/Father.vue&#8221;; export default { name: &#8220;GrandFather&#8221;, provide: { [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[28],"tags":[363,64],"class_list":["post-2023","post","type-post","status-publish","format-standard","hentry","category-javascript","tag-props","tag-vue"],"_links":{"self":[{"href":"https:\/\/www.yusian.com\/blog\/wp-json\/wp\/v2\/posts\/2023","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.yusian.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.yusian.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.yusian.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.yusian.com\/blog\/wp-json\/wp\/v2\/comments?post=2023"}],"version-history":[{"count":0,"href":"https:\/\/www.yusian.com\/blog\/wp-json\/wp\/v2\/posts\/2023\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.yusian.com\/blog\/wp-json\/wp\/v2\/media?parent=2023"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.yusian.com\/blog\/wp-json\/wp\/v2\/categories?post=2023"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.yusian.com\/blog\/wp-json\/wp\/v2\/tags?post=2023"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}