[{"data":1,"prerenderedAt":149},["ShallowReactive",2],{"content:\u002Fposts\u002F2025\u002Fchecking-if-a-slot-is-empty-in-vue":3,"surround:\u002Fposts\u002F2025\u002Fchecking-if-a-slot-is-empty-in-vue":138},{"id":4,"title":5,"body":6,"canonical":16,"categories":116,"date":118,"description":25,"draft":119,"extension":120,"image":121,"meta":122,"navigation":123,"path":124,"permalink":125,"readingTime":126,"recommend":125,"references":125,"seo":131,"sitemap":132,"stem":133,"tags":134,"type":125,"updated":118,"__hash__":137},"content\u002Fposts\u002F2025\u002FChecking if a slot is empty in Vue.md","【翻译】Vue 检查 slot 是否为空",{"type":7,"value":8,"toc":110},"minimark",[9,20,23,26,29,32,37,53,60,70,85,88,94,97,101,104,107],[10,11,12,13],"p",{},"原文地址： ",[14,15,19],"a",{"href":16,"rel":17},"https:\u002F\u002Fdev.to\u002Fjacobandrewsky\u002Fchecking-if-a-slot-is-empty-in-vue-270n",[18],"nofollow","Checking if a slot is empty in Vue",[21,22],"hr",{},[10,24,25],{},"在我的 Vue 项目中，我最近需要检查一个插槽是否为空。这个用例是一个可以接受一些内容的插槽的组件，但它也可以在没有它的情况下工作。为此，我查阅了 Vue 文档并自己进行了一些实验，看看是否能让它工作，结果令我非常惊喜，这又是 Vue 框架内置的另一个非常有用的功能。",[10,27,28],{},"实际上可能有几个原因让你想要检查一个槽位是否为空，但可能最主要的原因是只有当槽位实际上被传递给组件时才这样做。",[10,30,31],{},"今天，我想与您分享这个有用的技巧，以便您可以在项目中开始使用它。",[33,34,36],"h2",{"id":35},"检查-vue-中-slot-是否为空","🟢 检查 Vue 中 slot 是否为空",[10,38,39,40,44,45,48,49,52],{},"为了实现它，你可以使用内置的 Vue 对象 ",[41,42,43],"code",{"code":43},"$slots"," ，该对象总是由父组件传递。每个插槽都作为返回对应插槽名称键下数组 ",[41,46,47],{"code":47},"vnodes"," 的函数暴露 - 对于默认插槽，它将作为 ",[41,50,51],{"code":51},"$slots.default"," 访问，它是唯一的。",[10,54,55,56,59],{},"在以下示例中，只有当存在名为 header 的槽时， ",[41,57,58],{"code":58},"\u003Cheader>"," 才会被渲染：",[61,62,68],"pre",{"className":63,"code":65,"language":66,"meta":67},[64],"language-vue","\u003Ctemplate>\n    \u003Cheader v-if=\"$slots.header\">\n        \u003Ch1>My Awesome Heading\u003C\u002Fh1>\n        \u003Cslot name=\"header\" \u002F>\n    \u003C\u002Fheader>\n\u003C\u002Ftemplate>\n","vue","",[41,69,65],{"__ignoreMap":67},[10,71,72,73,76,77,80,81,84],{},"通常您会直接在模板中使用插槽，但您也可以在 ",[41,74,75],{"code":75},"script"," 中使用插槽 - 您需要使用内置的 ",[41,78,79],{"code":79},"useSlots"," 可组合函数，它将返回 ",[41,82,83],{"code":83},"setupContext.slots"," 。",[10,86,87],{},"为了达到上述示例中类似的结果，我们需要以下代码：",[61,89,92],{"className":90,"code":91,"language":66,"meta":67},[64],"\u003Cscript setup lang=\"ts\">\nimport { useSlots } from 'vue'\n\nconst slots = useSlots()\nconst shouldShowHeader = () => !!slots.header\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n    \u003Cheader v-if=\"shouldShowHeader\">\n        \u003Ch1>My Awesome Heading\u003C\u002Fh1>\n        \u003Cslot name=\"header\" \u002F>\n    \u003C\u002Fheader>\n\u003C\u002Ftemplate>\n",[41,93,91],{"__ignoreMap":67},[10,95,96],{},"如上例所示，在 Vue 中通过模板或脚本方式检查槽位是否为空真的非常简单 :)",[33,98,100],{"id":99},"摘要","✅ 摘要",[10,102,103],{},"干得好！你刚刚学会了如何在 Vue 中检查一个槽位是否为空。",[10,105,106],{},"请注意，下次再见！",[10,108,109],{},"And happy coding as always 🖥️",{"title":67,"searchDepth":111,"depth":111,"links":112},4,[113,115],{"id":35,"depth":114,"text":36},2,{"id":99,"depth":114,"text":100},[117],"译","2025-02-05 15:29:37",false,"md","https:\u002F\u002Fbitmc.uno\u002Fpicgo\u002FChecking%20if%20a%20slot%20is%20empty%20in%20Vue.jpg",{},true,"\u002Fposts\u002F2025\u002Fchecking-if-a-slot-is-empty-in-vue",null,{"text":127,"minutes":128,"time":129,"words":130},"3 min read",2.42,145200,484,{"title":5,"description":25},{"loc":124},"posts\u002F2025\u002FChecking if a slot is empty in Vue",[135,136],"Vue","slot","zNzqAVi30ipgNHL2-UjYOrYRIessf8HQkcsMpU2gnHI",[139,144],{"title":140,"path":141,"stem":142,"date":143,"type":125,"children":-1},"乙巳年除夕记","\u002Fposts\u002F2025\u002F2025-nongli-new-year","posts\u002F2025\u002F2025-nongli-new-year","2025-01-28 23:23:01",{"title":145,"path":146,"stem":147,"date":148,"type":125,"children":-1},"【翻译】如何优化 Vue 应用性能","\u002Fposts\u002F2025\u002Fhow-to-optimize-performance-in-vue-apps","posts\u002F2025\u002FHow To Optimize Performance In Vue Apps","2025-02-05 15:53:41",1789642590617]