Vue 插槽的理解与基础应用
admin
2024-04-01 21:31:59
0

目录

前言

使用插槽的意义

适用于的可优化场景

一. 具名插槽

示例

子组件 phone-call-common.vue

父组件 dial.vue

二. 作用域插槽

示例

子组件 current-user.vue

父组件一 example-one.vue

父组件二 example-two.vue

父组件三 example-three.vue

三. 解构插槽Prop

示例

子组件 current-user.vue

父组件一 example-one.vue

父组件二 example-two.vue

父组件三 example-three.vue

四. 动态插槽名

示例

子组件 current-user.vue

父组件 example-one.vue


前言

使用插槽的意义

1. 有效提高代码复用率。

2. 有效提高开发程序和维护程序的效率。

适用于的可优化场景

1. 多个页面组件或逻辑组件里复用了可提取为一个单独组件的代码块,但是对于不同的组件,该代码块中有小的区域里展示的信息内容或形式存在差异。

一. 具名插槽

示例

子组件 phone-call-common.vue

 

父组件 dial.vue


        显示结果为111333444555222。可以把插槽理解为一个口袋,能够装下所有给它的东西。
    
        解析上例:
        (1). 子组件中预留的插槽标签是,可以使用name属性指定插槽名称,默认为default。父组件中使用子组件时,可以通过v-slot指定将子组件标签对中的内容展示在子组件的哪个插槽内。
        (2). Vue 2.6.0版本给v-slot:设置了缩写#,因此上例中v-slot:可简写为#,例如上例的可简写为,注意#后面必须跟参数,例如#default不能简写为#。
        (3). 就组件层面而言,dial.vue里使用了phone-call-common.vue,dial.vue对于phone-call-common.vue而言是父组件,phone-call-common.vue对于dial.vue而言是子组件。不要因为父组件里使用了子组件内部设置好的插槽,就颠倒了父组件和子组件的指向认知。就像A包含B,B包含C,可以说A中的C被B包含,但不可以说A被B包含。
        (4). 对于方法的调用,注意作用域即可。可参考Vue子组件和父组件中调用对方定义的方法的实现形式。

二. 作用域插槽

示例

        展示效果,让父组件能够使用子组件里定义的变量,并控制插槽展示的内容。

子组件 current-user.vue

...
{{ user.lastName }}

...
data(){user:{firstName:'A',lastName:'b',}
}
...

父组件一 example-one.vue

...{{ user.firstName }}...

父组件二 example-two.vue

......


父组件三 example-three.vue
 

...{{ slotProps.user.firstName }}因为子组件current-user.vue只有一个默认插槽,所以可以直接将v-slot:default="slotProps"写在子组件标签里。此时v-slot:default="slotProps"还可简写为v-slot="slotProps"。如果子组件current-user里的插槽不止一个【还有具名插槽】,那么就不能将v-slot:default="slotProps"直接写在子组件标签里。...

三. 解构插槽Prop

        作用域插槽的内部工作原理是将插槽内容包裹在一个拥有单个参数的函数里,如下:

function (slotProps){// 插槽内容。
}

        所以,可以使用ES6【ES2015】语法解构slotProps中的变量,还可以给变量另起名字和赋默认值。

示例


子组件 current-user.vue

...
{{ user.lastName }}

...
data(){return {user:{firstName:'A',lastName:'b',},msg:"123",}
}
...

父组件一 example-one.vue

...
{{ user.firstName }}{{ msg }}解构获取子组件current-user里的user和msg属性,然后就可以使用子组件current-user中它们的值。

...

父组件二 example-two.vue

...
{{ person.firstName }}{{ msg }}解构获取子组件current-user里的user和msg属性,并在父组件example-two.vue的插槽作用域里将子组件current-user里的user属性重命名为person。

...

父组件三 example-three.vue

...
{{ user.firstName }}解构获取子组件current-user里的user属性,并在父组件example-two.vue的插槽作用域里设置子组件current-user里的user属性默认值。因此如果子组件current-user里的user属性的属性值未定义【undefined】时,会使用设置的属性默认值{firstName:'default name'}。

...

四. 动态插槽名

        Vue 2.6.0版本给v-slot指令新增了动态指令参数,可用来定义动态的插槽名。

示例

子组件 current-user.vue

...

...
data(){return {msg:'',userInfo:{fisrtName:'A',lastName:'b',}}
}
...

父组件 example-one.vue

...


...
data(){return {dynamicSlotName:"three",}
}
...

相关内容

热门资讯

怎么解除订阅安卓系统,安卓系统... 你是不是也和我一样,手机里订阅了好多服务,结果现在想解除订阅,却一头雾水?别急,今天就来手把手教你如...
安卓系统停用怎么开启,轻松恢复... 亲爱的手机控们,你是否曾经遇到过安卓系统突然停用的情况,让你手忙脚乱,不知所措?别担心,今天就来教你...
安卓系统电池健康度,电池健康度... 你有没有发现,你的安卓手机最近是不是有点儿不给力了?电池续航能力大不如前,充电速度也慢了不少?别急,...
安卓系统按键怎么截图,安卓系统... 你是不是也和我一样,有时候想截个图分享给朋友,却发现安卓手机的截图功能有点神秘呢?别急,今天就来手把...
购票系统安卓源代码,架构设计与... 你有没有想过,那些我们每天离不开的购票系统,它们背后的秘密是什么呢?今天,就让我带你一探究竟,揭开购...
安卓手机系统后台测试,深度解析... 你有没有发现,你的安卓手机后台总是悄悄地忙碌着?别小看了这些后台程序,它们可是手机系统稳定运行的关键...
安卓系统重启的图标,解锁设备新... 手机突然重启,是不是心里有点慌?别急,今天就来和你聊聊安卓系统重启的图标,让你一眼就能认出它,再也不...
车载智慧屏安卓系统,智能出行新... 你有没有发现,现在的车载智慧屏越来越智能了?尤其是那些搭载了安卓系统的,简直就像是个移动的小电脑,不...
安卓系统连上网权限,解锁设备无... 你有没有发现,你的安卓手机里有些应用总是偷偷连上网?别小看这个小小的网络权限,它可是能影响你隐私、消...
安卓谷歌操作系统,探索安卓谷歌... 你知道吗?在智能手机的世界里,有一个操作系统可是无人不知、无人不晓,那就是安卓谷歌操作系统。它就像一...
安卓系统手写%怎样调出,具体实... 你有没有遇到过这种情况:在使用安卓手机的时候,突然想用手写输入法来记录一些灵感或者重要信息,可是怎么...
安卓手机重置 系统设置,轻松恢... 手机用久了是不是感觉卡顿得厉害?别急,今天就来教你怎么给安卓手机来个大变身——重置系统设置!想象你的...
win如何安装安卓系统,Win... 哇,你有没有想过,让你的Win系统也能玩转安卓应用?没错,就是那种在手机上轻松自如的安卓系统,现在也...
苹果qq和安卓系统,跨平台体验... 你有没有发现,现在手机市场上,苹果和安卓的较量可是越来越激烈了呢!咱们就来聊聊这个话题,看看苹果QQ...
显示最好的安卓系统,探索最新旗... 你有没有想过,为什么安卓系统那么受欢迎呢?它就像一个魔法盒子,里面装满了各种神奇的魔法。今天,就让我...
安卓app怎么降级系统,系统版... 你有没有发现,有时候安卓手机的系统更新后,新功能虽然炫酷,但老系统用起来更顺手呢?别急,今天就来教你...
雷军脱离安卓系统,引领科技变革... 你知道吗?最近科技圈可是炸开了锅,因为我们的雷军大大竟然宣布要脱离安卓系统,这可真是让人大跌眼镜啊!...
安卓系统自动开网络,安卓系统自... 你有没有发现,手机里的安卓系统有时候会自动开启网络连接,这可真是让人又爱又恨啊!有时候,你正专心致志...
安卓系统怎样控制后台,因为服务... 手机里的安卓系统是不是感觉越来越卡了?后台程序太多,不仅耗电还影响性能。别急,今天就来教你怎么巧妙地...
安卓系统打游戏推荐,一触即达! 你有没有发现,现在手机游戏越来越好玩了?不管是休闲小游戏还是大型MMORPG,都能在手机上畅玩。但是...