Vue 插槽(slot)的类型与使用

Vue slot是组件内容分发的出口,其设计规范源于:Web Components规范草案。一般的,基于Slot使用场景我们可以将其分为三大类,其中各个类型之间又存在着依次聚合的关系。

默认插槽

常见适用于静态、或者无强联系、分类布局的组件中。如网站底部的footer组件,我们会有些基础的元素,如copyright、开发公司、地址等,但还存在一些不确定是否公用的东西,如时间、统计等,这时,我们就可以通过slot开发一个分发的出口,让具体场景使用的开发人员自己决定是否使用扩展分发已经如何扩展的问题。默认插槽的使用方式如下:

// 子组件 Aritcile.vue





// 父组件 detail.vue





如此显示内容为:

父组件的标题
这时子组件的标题
这里是需要分发的子组件的段落内容

具名插槽

默认插槽在常见的常见基本使用,但存在需要多组件的多个部分进行自定义分发时,默认插槽的方式就不太适用了。因为无法指定位置不确定需要将内容插入到那个slot下。这时,我们就需要通过给slot一个名字来实现指定位置的插入。常见的场景如页面布局,我们需要将一个页面分为三个部分:头部、底部、内容展示区域,这时我们就需要给对应的slot进行命名。使用如下:












显示内容如下:

当前页面的显示内容
頭部内容
打印正文内容
底部内容

作用域插槽

基于上述两种插槽的基础上,当我们需要在分发内容中获取到分发的参数内容,如对于一个列表而言,每个item在我们每次调用的时候都有可能不同,我们希望在列表组件中处理些通用逻辑,但具体item的样式我们需要足够的可扩展性,这是,我们就需要通过分发slot出口及其item的数据来实现插槽的功能,这就是作用域插槽。下面,通过一个列表的示例来了解。















如上,通过在组件list中 ""绑定数据,然后在父组件中使用 ""来获取数据。

展开阅读全文

页面更新:2024-03-06

标签:插槽   段落   组件   场景   常见   类型   页面   标题   内容   数据   列表

1 2 3 4 5

上滑加载更多 ↓
推荐阅读:
友情链接:
更多:

本站资料均由网友自行发布提供,仅用于学习交流。如有版权问题,请与我联系,QQ:4156828  

© CopyRight 2020-2024 All Rights Reserved. Powered By 71396.com 闽ICP备11008920号-4
闽公网安备35020302034903号

Top