Vue中的插槽、内容分发、具名插槽应用实例分析
今天小编给大家分享一下Vue中的插槽、内容分发、具名插槽应用实例分析的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。
创新互联长期为近1000家客户提供的网站建设服务,团队从业经验10年,关注不同地域、不同群体,并针对不同对象提供差异化的产品和服务;打造开放共赢平台,与合作伙伴共同营造健康的互联网生态环境。为博野企业提供专业的网站建设、成都网站建设,博野网站改版等技术服务。拥有十多年丰富建站经验和众多成功案例,为您定制开发。
插槽 Slots简介
Vue中组件的数据可以通过props进行传递,或者通过事件的方式进行获取传递,但当需要接收模板内容(任意合法的模板内容,代码片段、Vue组件)时,就需要使用插槽来实现了。当然也可以通过函数式编程间接实现。
可以将插槽理解为js中的函数进行编译
// 父元素传入插槽内容
FancyButton('Click me!')
// FancyButton 在自己的模板中渲染插槽内容
function FancyButton(slotContent) {
return `
最好的封装方式是将共性抽取到组件中,将不同点暴露为插槽 - 抽取共性,保留不同
父组件模板的所有东西都会在父组件作用域中编译,子组件模板的所有东西都会在子组件作用域内编译 - 编译作用域
slot-scope浅析
常规的slot可以用于自定义组件的模板,但只是限制于固定的模板,无法自定义内部的具体的某一项,即常规的slot无法实现对组件循环体的每一项进行不同的内容分发,此时可以通过slot-scope进行实现,本质上和slot一样,不同点在于可以进行参数传递
//普通的组件定义
{{ book.name }}
//slot-scope组件定义
{{ book.name }}
//父组件使用
限时优惠
{{ slotProps.book.name }}
使用slot-scope时,当父组件使用该API,对应的插槽会替换模板中的slot进行展示
常用API浅析
具名插槽
在组件中定义多个插槽出口可以兼容多个不同需求的兼容性,使得多个插槽内容传入到各自的插槽出口中;当插槽中配置了
name
属性时,此插槽就被称为具名插槽(named slots),没有提供name的插槽会隐式命名为「default」
v-slot
可以简写为#
,其值对应于插槽中的name
对应的值;当在一个组件中同时存在默认插槽和具名插槽时,所有位于顶级的非
template
节点都被隐式的视为默认插槽的内容,因此可以省略默认插槽的template
节点标签;
A paragraph for the main content.
And another one.
Here's some contact info
作用域插槽
普通的插槽,是无法获取其他作用域下的数据的,即
父组件模板中的表达式只能访问父组件的作用域;子组件模板中的表达式只能访问子组件的作用域
但在某些情况下,插槽中的内容想要同时使用父组件和子组件内的数据,可以通过像组件传递数据props
那样,让子组件在渲染时将一部分数据提供给插槽,这样在组件外部(父组件)中就可以使用子组件中的数据了-通过slot
的方式
子组件传入插槽的 props 作为了 v-slot
指令的值,可以在插槽内的表达式中访问,其中name是Vue特意保留的attribute,不会作为props进行传递
数据传递
//子组件
数据接收
//父组件 - 使用方
{{ shopInfo }} {{ userInfo }}
{{ shopInfo }}
{{ introduction }}
{{ userInfo }}
具名插槽接收
默认插槽接收
使用slot-scope时,用最后一个slot-scope替换模板中的slot
555
{{scope.name}}
{{scope}}
{{scope.name}}
{{scope.age}}
使用作用域插槽时,可以实现既可以复用子组件slot,又可以使得slot的内容不一致,它允许使用者传递一个模板而不是已经渲染好的元素给插槽,所谓作用域是指模板虽然在父级作用域中渲染的,但是却可以拿到子组件的数据
常规的v-bind需要携带参数key值进行传递,例如
v-bind:info = '123'
;但是有时候会省略这个key值,直接进行传递数据,如v-bind = 'item'
,这种用法会将整个对象的所有属性都绑定到当前元素上,适用于需要绑定的属性过多的场景
// data: {
// shapes: [
// { name: 'Square', sides: 4 },
// { name: 'Hexagon', sides: 6 },
// { name: 'Triangle', sides: 3 }
// ],
// colors: [
// { name: 'Yellow', hex: '#F4D03F', },
// { name: 'Green', hex: '#229954' },
// { name: 'Purple', hex: '#9B59B6' }
// ]
// }
{{ shape.name }} ({{ shape.sides }} sides)
{{ color.name }}
{{ title }}