{"id":1295,"date":"2019-09-15T21:50:35","date_gmt":"2019-09-15T13:50:35","guid":{"rendered":"https:\/\/www.develop-note.com\/blog\/?p=1295"},"modified":"2022-02-17T15:14:17","modified_gmt":"2022-02-17T07:14:17","slug":"2020ironman-svelte-slot","status":"publish","type":"post","link":"https:\/\/www.develop-note.com\/blog\/2019\/09\/15\/2020ironman-svelte-slot\/","title":{"rendered":"\u7b2c\u5341\u4e00\u5c46\u9435\u4eba\u8cfd \u524d\u7aef\u5de5\u7a0b\u5e2b\u7684\u53e6\u4e00\u500b\u9078\u64c7 svelte DAY14- slot \u8907\u5408\u5f0f\u5143\u4ef6"},"content":{"rendered":"

svelte slot \u7684\u4ecb\u7d39<\/h1>\n

svelte slot \u662f\u5728\u8aaa\u660e\u5b8chtml\u7684\u4e8b\u4ef6<\/a>\u4ee5\u53ca\u8b8a\u6578\u7d81\u5b9a\u9084\u6709fetch\u548cpromise\u9084\u6709await<\/a>\u4e4b\u5f8c\u8981\u8aaa\u660e\u7684\uff0c\u70ba\u4ec0\u9ebc\u9019\u500b slot \u9019\u9ebc\u91cd\u8981\uff0c\u56e0\u70ba\u5b83\u53ef\u4ee5\u8b93\u5143\u4ef6\u958b\u767c\u66f4\u4fbf\u5229\uff0c\u5ee2\u8a71\u4e0d\u591a\u8aaa\u5148\u8b93\u5927\u5bb6\u770b\u770b\u4ed6\u7684\u5a01\u529b\u3002<\/p>\n

\u5167\u5bb9\u4ecb\u7d39<\/h2>\n

\u76f8\u4fe1\u8b80\u8005\u5011\u5e38\u6703\u6709\u9047\u5230\uff0c\u6709\u5f88\u591ahtml\u90fd\u5f88\u76f8\u540c\uff0c\u4f46\u662f\u53c8\u9700\u8981\u5ba2\u88fd\u5316\u4e00\u4e9b\u90e8\u5206\uff0c\u4f46\u662f\u53c8\u4e0d\u78ba\u5b9a\u6709\u54ea\u4e9b\u5730\u65b9\u9700\u8981\u5ba2\u88fd\u5316\uff0c\u6240\u4ee5\u5728\u958b\u767c\u4e0a\u5f88\u4e0d\u5bb9\u6613\u628a\u5171\u540c\u7684\u5730\u65b9\u62bd\u8c61\u51fa\u4f86\u3002\u6240\u4ee5\u9019\u6642html\u5c31\u6709slot\u9019\u500b\u6a19\u7c64\u7684\u51fa\u73fe\uff0c\u4f46\u662f\u7576\u7136\u4e0d\u6642\u6240\u6709\u7684\u700f\u89bd\u5668\u90fd\u652f\u63f4\u9019\u529f\u80fd\uff0c\u66f4\u5225\u63d0\u820a\u7248\u672c\u7684\u700f\u89bd\u5668\u3002\u90a3slot\u9019\u529f\u80fd\u7684\u7279\u9ede\u5728\u54ea\u88e1\u5462?\u5927\u5bb6\u53ef\u4ee5\u770b\u770bslot\u4ecb\u7d39<\/a>\uff0c\u4e0d\u904e\u7c21\u55ae\u8b1b\u5c31\u662f\u628ahtml\u7684\u539f\u4ef6\u4e0b\u7684\u5b50\u7bc0\u9ede\u5167\u5d4c\u5230\u5143\u4ef6\u5167\uff0c\u9019\u6a23\u63cf\u8ff0\u61c9\u8a72\u5927\u5bb6\u6703\u807d\u5f97\u5f88\u6a21\u7cca\uff0c\u6240\u4ee5\u5927\u5bb6\u770b\u4e00\u4e0b\u4e0b\u5217\u7684\u4f8b\u5b50\uff0c\u9019\u6642\u9700\u8981\u6709\u5169\u500b\u5143\u4ef6
\n\u5982\u4e0b\u6240\u793a\u3002<\/p>\n

svelte slot \u7684\u5be6\u4f5c<\/h2>\n

\u9996\u5148\u662fApp.svelte\u7684\u76f8\u95dc\u5167\u5bb9\uff0c\u4e3b\u8981\u662f\u4f7f\u7528\u5230\u5f8c\u9762\u7684Box.svelte\u4e26\u5728\u5176\u4e0b\u9762\u6709\u5b9a\u7fa9html\u7684\u5b50\u7bc0\u9ede\u3002<\/p>\n

<script>\n    import Box from '.\/Box.svelte';\n<\/script>\n\n<Box>\n    <h2>Hello!<\/h2>\n    <p>This is a box. It can contain anything.<\/p>\n<\/Box><\/code><\/pre>\n
\u63a5\u4e0b\u4f86\u5c31\u662fBox.svelte\u7684\u76f8\u95dc\u5167\u5bb9\uff0c\u9019\u908a\u5b9a\u7fa9\u4e86\u76f8\u95dc\u7684css\u6a23\u5f0f\uff0c\u4f46\u662f\u91cd\u9ede\u5728\u65bcslot<\/code>\u9019\u500bhtml\u6a19\u7c64\uff0c\u56e0\u70ba\u5728App.svelte\u88e1\u9762\u5b9a\u7fa9\u7684Box\u5b50\u7bc0\u9ede\u6703\u76f4\u63a5\u653e\u5230slot<\/code>\u9019\u500bhtml\u6a19\u7c64\u7684\u4f4d\u7f6e\uff0c\u6240\u4ee5\u8aaa\u9019\u500bBox.svelte\u53ef\u4ee5\u5f88\u7c21\u55ae\u7684\u8986\u7528\uff0c\u53ea\u8981\u5c07\u5148\u95dc\u7684html\u653e\u5728\u5176\u5b50\u7bc0\u9ede\u5c31\u53ef\u4ee5\u4e86\u3002<\/p>\n
<style>\n    .box {\n        width: 300px;\n        border: 1px solid #aaa;\n        border-radius: 2px;\n        box-shadow: 2px 2px 8px rgba(0,0,0,0.1);\n        padding: 1em;\n        margin: 0 0 1em 0;\n    }\n<\/style>\n\n<div class="box">\n    <slot><\/slot>\n<\/div><\/code><\/pre>\n
\u5982\u4f55\u8a2d\u5b9a\u9810\u8a2d\u503c<\/h2>\n
\u7576\u7136\u5927\u5bb6\u6703\u60f3\u8981\u76f4\u63a5\u4f7f\u7528Box.svelte\u9019\u5143\u4ef6\uff0c\u6240\u4ee5\u9019\u6642\u5019\u5c31\u6703\u60f3\u8aaa\u6709\u6c92\u6709\u8a2d\u5b9a\u9810\u8a2d\u503c\u7684\u65b9\u5f0f\uff0c\u9019\u88e1\u53ea\u8981\u5c07\u4e0a\u9762\u7684\u4f8b\u5b50\u4fee\u6539\u6210\u4e0b\u5217\u5167\u5bb9\u5373\u53ef\u3002<\/p>\n
<style>\n    .box {\n        width: 300px;\n        border: 1px solid #aaa;\n        border-radius: 2px;\n        box-shadow: 2px 2px 8px rgba(0,0,0,0.1);\n        padding: 1em;\n        margin: 0 0 1em 0;\n    }\n<\/style>\n\n<div class="box">\n    <slot>\n        <em>no content was provided<\/em>\n    <\/slot>\n<\/div><\/code><\/pre>\n
\u9019\u6642\u53ea\u8981\u4f7f\u7528Box.svelte\u6642\u6c92\u6709\u5b50\u7bc0\u9ede\u5c31\u6703\u76f4\u63a5\u986f\u793a\u9810\u8a2d\u7684\u5167\u5bb9\u3002<\/p>\n
\u5c0f\u7d50<\/h2>\n
\u5728\u4ecb\u7d39\u5b8c\u57fa\u672c\u7684svelte\u7684html\u529f\u80fd\u5f8c\u8981\u958b\u59cb\u9032\u5165\u9032\u968e\u7684\u5167\u5bb9\u4e86\uff0c\u4eca\u5929\u8ddf\u5927\u5bb6\u4ecb\u7d39slot\uff0c\u4f46\u662f\u4eca\u5929\u7684slot\u53ea\u662f\u521d\u6b65\u7684\u4ecb\u7d39\u5927\u5bb6\u5982\u4f55\u4f7f\u7528\uff0c\u5f85\u660e\u65e5\u5728\u66f4\u9032\u4e00\u6b65\u4ecb\u7d39slot\u7684\u9032\u968e\u5167\u5bb9\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"
svelte slot \u7684\u4ecb\u7d39 svelte slot \u662f\u5728\u8aaa\u660e\u5b8chtml\u7684\u4e8b\u4ef6\u4ee5\u53ca\u8b8a\u6578\u7d81\u5b9a\u9084\u6709fetch\u548cp … <\/p>\n
\u95b1\u8b80\u5168\u6587\u3008\u7b2c\u5341\u4e00\u5c46\u9435\u4eba\u8cfd \u524d\u7aef\u5de5\u7a0b\u5e2b\u7684\u53e6\u4e00\u500b\u9078\u64c7 svelte DAY14- slot \u8907\u5408\u5f0f\u5143\u4ef6\u3009<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"_exactmetrics_skip_tracking":false,"_exactmetrics_sitenote_active":false,"_exactmetrics_sitenote_note":"","_exactmetrics_sitenote_category":0,"footnotes":""},"categories":[2],"tags":[160,79],"class_list":["post-1295","post","type-post","status-publish","format-standard","hentry","category-develop","tag-2019ironman","tag-svelte"],"_links":{"self":[{"href":"https:\/\/www.develop-note.com\/blog\/wp-json\/wp\/v2\/posts\/1295","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.develop-note.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.develop-note.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.develop-note.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.develop-note.com\/blog\/wp-json\/wp\/v2\/comments?post=1295"}],"version-history":[{"count":9,"href":"https:\/\/www.develop-note.com\/blog\/wp-json\/wp\/v2\/posts\/1295\/revisions"}],"predecessor-version":[{"id":3010,"href":"https:\/\/www.develop-note.com\/blog\/wp-json\/wp\/v2\/posts\/1295\/revisions\/3010"}],"wp:attachment":[{"href":"https:\/\/www.develop-note.com\/blog\/wp-json\/wp\/v2\/media?parent=1295"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.develop-note.com\/blog\/wp-json\/wp\/v2\/categories?post=1295"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.develop-note.com\/blog\/wp-json\/wp\/v2\/tags?post=1295"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}