中文建网站,加盟网站推广,如何找专业的网站建设公司,网站指定关键词优化插槽是vue中的一个非常强大且灵活的功能#xff0c;在写组件时#xff0c;可以为组件的使用者预留一些可以自定义内容的占位符。通过插槽#xff0c;可以极大提高组件的客服用和灵活性。
插槽大体可以分为三类#xff1a;默认插槽#xff0c;具名插槽和作用域插槽。
下面…插槽是vue中的一个非常强大且灵活的功能在写组件时可以为组件的使用者预留一些可以自定义内容的占位符。通过插槽可以极大提高组件的客服用和灵活性。
插槽大体可以分为三类默认插槽具名插槽和作用域插槽。
下面将一一介绍。
①默认插槽
这种插槽没有指定名称用于接受父组件传递的未明确指定插槽名称的内容。在子组件中使用slot/slot定义插槽所在位置父组件在书写子组件的标签体里书写插入到该插槽的内容。
代码如下
父组件index.vue
!--* Author: RealRoad* Date: 2024-10-18 10:49:28* LastEditors: Do not edit* LastEditTime: 2024-11-14 14:13:02* Description: * FilePath: \project_10_08\vite-project\src\views\home\index.vue
--templatediv classboxCategory classcontentdiv我是文本/divimg srchttps://img0.baidu.com/it/u454995986,3330485591fm253fmtautoapp138fJPEG?w500h375 alt/CategoryCategory classcontentel-button typeprimary sizedefault click一个按钮/el-button/CategoryCategory classcontentel-card shadowalways :body-style{ padding: 20px }div slotheaderspan卡片标题/span/div!-- card body --div卡片体/div/el-card/Category/div
/templatescript setup langts
import {ref,reactive} from vue
import Category from ./Category.vue
/scriptstyle scoped langscss
.box{display:flex;justify-content: space-evenly;margin-top: 20px;.content{margin-left: 10px;background:pink;text-align: center;width: 400px;height: 600px;img{width: 100%;}}
}
/style子组件Category.vue
templatediv我是子组件!-- 一个默认插槽 --slot插槽的默认内容/slot/div
/templatescript setup langts
import {ref,reactive} from vue/scriptstyle scoped/style
来看效果 当然了在子组件中可以书写插槽的默认内容就是说如果父组件没有书写任何内容就会默认使用子组件插槽内的内容。 再写一个子组件看一下效果 ②具名插槽
顾名思义就是带有名称的插槽用于接受父组件中明确指定插槽名称的内容。
这里需要注意vue2和vue3的写法略有不同因为v3兼容v2所有有些老版本的项目写的插槽还是v2的写法。
首先看v3的具名插槽写法
子组件的写法相同在子组件中使用slot name插槽名/slot就可以给插槽起一个名字。
子组件NamedSlot.vue
templatediv我是子组件2!-- 一个默认插槽 --slot nametop插槽的默认内容/slotslot namebottom插槽的默认内容/slot/div
/templatescript setup langts
import {ref,reactive} from vue/scriptstyle scoped/style
来到父组件index.vuev3
!--* Author: RealRoad* Date: 2024-10-18 10:49:28* LastEditors: Do not edit* LastEditTime: 2024-11-14 14:40:49* FilePath: \project_10_08\vite-project\src\views\home\index.vue* Description:
--templatediv classboxNamedSlot classcontenttemplate #topdiv 我是文本/div/templatetemplate #bottomimg srchttps://img0.baidu.com/it/u454995986,3330485591fm253fmtautoapp138fJPEG?w500h375 alt/template/NamedSlotCategory classcontentel-button typeprimary sizedefault click一个按钮/el-button/CategoryCategory classcontentel-card shadowalways :body-style{ padding: 20px }div slotheaderspan卡片标题/span/div!-- card body --div卡片体/div/el-card/CategoryCategory classcontent/Category/div
/templatescript setup langts
import {ref,reactive} from vue
import Category from ./Category.vue
import NamedSlot from ./NamedSlot.vue;
/scriptstyle scoped langscss
.box{display:flex;justify-content: space-evenly;margin-top: 20px;.content{margin-left: 10px;background:pink;text-align: center;width: 400px;height: 600px;img{width: 100%;}}
}
/style
可以对比一下上面的默认插槽我们只修改了第一个子组件其他的还是保持不变。
先看一下效果 效果是一样的不过是我们在子组件中起了名字这样我们就可以在父组件随便改变顺序就不用改变代码顺序了直接修改插槽的名字即可。 说一下v3中的父组件的具名插槽的写法
子组件名称 template #插槽名 插槽内容 /template
/子组件名称
这样的格式借用了template标签并在标签上使用#的简写形式也是现在element-plus等新版UI组件库使用的方式。
说完了v3那一定要说一下老版本的v2写法毕竟老项目中的都是这样的写法
子组件名称
子组件内容--标签 slot插槽名 /子组件内容--标签
/子组件名称
注意这里面在测试的时候出现了一个误区我直接卸载了子组件名称的属性上导致里面的内容也是无法正常显示。
这就比较难受在vue3项目中使用vue2的老具名插槽用法不显示原因可能有很多保险起见还是专门用脚手架建立的vue2项目中进行测试。 所以紧急来到上次做的vue2项目中进行老语法测试
父组件index.vue
!--* Author: RealRoad* Date: 2024-11-12 09:25:23* LastEditors: Do not edit* LastEditTime: 2024-11-14 15:29:28* Description: * FilePath: \datalized-crm-ui\datalized-crm-ui\src\views\test\index.vue
--
!--* Author: RealRoad* Date: 2024-11-12 09:25:23* LastEditors: Do not edit* LastEditTime: 2024-11-12 16:10:43* Description: * FilePath: \datalized-crm-ui\datalized-crm-ui\src\views\test\index.vue
--
templatedivComponentA div slottop测试一波具名插槽img srchttps://img1.baidu.com/it/u1047145501,4073770646fm253app120sizew931n0fJPEGfmtauto?sec1731690000t14c402c69d53274bb7fa9af0d0e0e392 alt/div/ComponentAComponentB /!-- a-form layoutinline classmy-customer-form keyup.enter.nativesearchQuerya-form-item label商机名称a-inputplaceholder请输入商机名称/a-input/a-form-itema-form-item label客户名称a-inputplaceholder请输入客户名称allowClear/a-input/a-form-itema-form-item label赢单率a-select:getPopupContainernode node.parentNodeplaceholder请选择赢单率default-value10%stylewidth: 100%:style{ width: searchItemWidth }a-select-option value10% 10%/a-select-optiona-select-option value20% 20%/a-select-optiona-select-option value30% 30%/a-select-optiona-select-option value40% 40%/a-select-optiona-select-option value50% 50%/a-select-optiona-select-option value60% 60%/a-select-optiona-select-option value70% 70%/a-select-optiona-select-option value80% 80%/a-select-optiona-select-option value90% 90%/a-select-optiona-select-option value100% 100%/a-select-option/a-select/a-form-itema-form-item label商机状态j-dict-select-tagtyperadioButtondictCodechance_status//a-form-item/a-formhr展示一下过度diva-button typeprimary clickisShow!isShow显示/隐藏/a-buttontransition namemez appear afterEnterhandleEnterafter-leavehandleLeaveappearhandleAppearafter-appearmyhandleEnterbefore-entermyEnterenterhandleEnterleavehandleLeaveh1 v-showisShow 测试文本/h1/transition/div1112 --/div
/templatescriptimport ComponentA from ./brotherA.vue
import ComponentB from ./brotherB.vue
import JDictSelectTag from /components/dict/JDictSelectTag
export default {name: Test,data() {return {searchItemWidth:200px,isShow:true};},methods: {handleEnter(){console.log(after-enter);},handleLeave(){console.log(after-leave);},handleAppear(){console.log(appear);},handleEnter(){console.log(enter);},handleLeave(){console.log(leave);},myEnter(){console.log(before-enter);},myhandleEnter(){console.log(after-appear);},},components: {ComponentA,ComponentB},}
/scriptstyle langless scoped
// import ~assets/less/common.less;h1{background-color: rgb(98, 57, 133);}
//进入的起点
.mez-enter,.mez-leave-to{transform: translateX(-100%);
}
//进入的过程
.mez-enter-active,.mez-leave-active{// animation: identifier 1s linear;transition: 0.5s linear;
}
// .mez-leave-active{
// // animation: identifier 1s linear reverse;
// }
//进入的终点
.mez-enter-to,.mez-leave{transform: translateX(0);
}
//离开的起点
// .mez-leave{
// transform: translateX(0);
// }
// //离开的终点
// .mez-leave-to{
// transform: translateX(-100%);
// }// keyframes identifier {
// from{
// transform: translateX(-100%);
// }
// to{
// transform: translateX(0px);
// }
// }
/style
子组件brotherA.vue:
template
div兄弟A组件!-- a-button typeprimary sizedefault clickhandleClick点我给B兄弟传值/a-button --slot nametop如果父组件没有内容显示我/slot
/div
/templatescript
export default {name: ,data() {return {};},methods: {// handleClick() {// this.$emit(sendValue, 兄弟A组件传给B的参数);// }}
}
/scriptstyle scoped/style
来看效果 果然和脚手架有关可以正常使用。在vue3项目中哪怕是写成了不是setup语法糖的写法也是不能正常显示这里兄弟们需要注意一下也有可能是我用vite建立的是vue3的项目因为既有vue3的setup语法糖写法又有vue2的export default{}写法造成的冲突。【另外这里还有一个vue2.7还是啥来着提出的配合template的template v-slot:插槽名/template的简写写法这个就不展开说了知道就行。】
③作用域插槽 它是一种特殊的插槽允许子组件爱你将数据暴露给父组件的插槽内容。在子组件中语法为slot :数据名“数据值”/slot的写法将自己的数据传递给插槽。
而在父组件中通过template v-slot:插槽名称“slotProps”接受数据并使用slotProps来访问传递过来的数据。
子组件
templatedivslot :usersuserList/slot/div
/templatescript setup
import { reactive } from vue;// 定义一个响应式数组作为作用域插槽的数据源
const userList reactive([{ name: Alice, age: 25 },{ name: Bob, age: 30 },{ name: Charlie, age: 35 }
]);
/scriptstyle scoped
/* 子组件的样式如果需要的话 */
/style
父组件
templatedivh1作用域插槽示例/h1ChildComponent!-- 使用 v-slot 接收作用域插槽的数据 --template #default{ users }ulli v-foruser in users :keyuser.name{{ user.name }} - {{ user.age }}/li/ul/template/ChildComponent/div
/templatescript setup
import ChildComponent from ./ChildComponent.vue;
/scriptstyle scoped
/* 父组件的样式如果需要的话 */
/style
