首页vue slot 默认值不显示

vue slot 默认值不显示

时间: 2023-08-31 14:08:56 浏览: 147

详解vue 2.6 中 slot 的新用法

最近发布不久的Vue 2.6，使用插槽的语法变得更加简洁。对插槽的这种改变让我对发现插槽的潜在功能感兴趣，以便为我们基于Vue的项目提供可重用性，新功能和更清晰的可读性。真正有能力的插槽是什么？如果你是Vue的新手，或者还没有看到2.6版的变化，请继续阅读。也许学习插槽的最佳资源是Vue自己的文档，但是我将在这里给出一个纲要。想阅读更多优质文章请猛戳GitHub博客 ,一年百来篇优质文章等着你！插槽是什么？插槽是Vue组件的一种机制，它允许你以一种不同于严格的父子关系的方式组合组件。插槽为你提供了一个将内容放置到新位置或使组件更通用的出口。从一个简单的例子开始： // frame 在Vue 2.6中，插槽（slot）的语法得到了显著简化，使得开发者能够更加高效地利用组件的可重用性和可读性。插槽是Vue组件间内容分发的关键机制，允许我们以非传统父子关系的方式组合组件，提供了一个内容插入到组件特定位置的出口。基础插槽是最简单的形式，它允许你在组件内部定义一个位置，外部内容可以插入。例如： ```html // frame.vue <template> <div class="frame"> <slot></slot> </div> </template> ``` 在这个`frame`组件中，`<slot>`元素定义了一个位置，外部模板可以直接将内容插入到`frame`组件内。在`app.vue`中使用时： ```html <template> <frame> <img src="an-image.jpg"> </frame> </template> ``` `img`标签将会替换`frame`组件内的`<slot>`标签。对于带有默认内容的插槽，可以在组件内部定义，当外部没有提供内容时，显示默认内容： ```html // frame.vue <template> <div class="frame"> <slot>如果这里没有指定任何内容，这就是默认内容</slot> </div> </template> ``` 命名插槽则允许组件定义多个插槽，每个都有自己的名字，这样可以更精确地控制内容的位置。例如： ```html // titled-frame.vue <template> <div class="frame"> <header> <h2><slot name="header">Title</slot></h2> </header> <slot>如果这里没有指定任何内容，这就是默认内容</slot> </div> </template> ``` 在`app.vue`中使用`titled-frame`时，可以分别指定内容到命名的`header`插槽和默认插槽： ```html <template> <titled-frame> <template v-slot:header> My Image's Title </template> <img src="an-image.jpg"> </titled-frame> </template> ``` 这里，`v-slot:header`指令用于指定内容应插入到`header`插槽。作用域插槽是另一个强大的特性，它允许组件向其插槽传递数据或函数。以下是一个例子： ```html // current-user.vue <template> <span><slot v-bind:user="user">{{ user.lastName }}</slot></span> </template> <script> export default { data () { return { user: {...} } } } </script> ``` 在这个`current-user`组件中，`v-bind:user="user"`将`user`对象传递给插槽。外部模板可以访问并使用这个数据： ```html <template> <current-user> <template v-slot:default="slotProps"> {{ slotProps.user.firstName }} {{ slotProps.user.lastName }} </template> </current-user> </template> ``` 在这里，`v-slot:default="slotProps"`接收来自组件的插槽属性，并在模板中使用它们。`slotProps`对象包含了组件传递给插槽的`user`属性。总结一下，Vue 2.6中的插槽新用法主要包括： 1. 基础插槽：无名插槽，用于插入任意内容。 2. 默认内容插槽：提供默认内容，当外部没有指定内容时显示。 3. 命名插槽：通过名字区分多个插槽，提高内容组织的灵活性。 4. 作用域插槽：允许组件向插槽传递数据或函数，增加了组件间的交互深度。了解并熟练掌握这些插槽用法，可以帮助你构建更强大、更可复用的Vue组件。在实际开发中，结合Vue的其他特性，如计算属性、生命周期钩子、自定义指令等，可以创建出功能丰富且易于维护的应用。

在使用小程序组件的slot插槽时，不能像Vue和React那样给插槽提供默认值。这是因为在使用组件时，如果没有传递值给插槽，它就不会显示默认值。这与Vue和React的行为有所不同。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [如何优雅的解决小程序组件(component)的插槽(slot)没有默认值的情况？](https://blog.csdn.net/weixin_45747310/article/details/122305928)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

阅读全文