网站建设与网页制作实训报告,谁做网站做的比较可信,华为云怎么建网站,网站建设 自助建站#x1f4dd;个人主页#xff1a;五敷有你 #x1f525;系列专栏#xff1a;Vue
⛺️稳中求进#xff0c;晒太阳 插槽
作用#xff1a;让组件内部一些 结构 支持 自定义
插槽的分类#xff1a;
默认插槽。具名插槽。
基础语法
组件内需要定制的结构部分个人主页五敷有你 系列专栏Vue
⛺️稳中求进晒太阳 插槽
作用让组件内部一些 结构 支持 自定义
插槽的分类
默认插槽。具名插槽。
基础语法
组件内需要定制的结构部分改用占位
templatediv classmainh2确认吗/h2slot/slotdiv classbottombutton确认/buttonbutton取消/button/div/div
/template
使用组件时标签内部传入结构替换slot
BaseA我是插槽练习/BaseA
插槽的默认值
通过插槽完成内容的定制传什么显示什么但是不传则是空白
插槽的后备内容封装组件时可以为预留的插槽提供后备内容默认内容
语法在slot标签内放置内容作为默认显示内容效果 外部使用组件不传东西则slot会显示后备内容外部使用组件传东西了则slot整体会被替换掉
具名插槽一个组件有多处结构需要外部传入标签进行定制
语法
多个slot使用name属性区分名字
简写v-slot:插槽名 简化---- #插槽名 div classmainh2slot namehead/slot/h2slot namebody我是默认值/slotdiv classbottomslot namefoot/slot/div/div
template配置v-slot:名字 来分发对应标签 BaseAtemplate v-slot:head我是标题/templatetemplate v-slot:bodyp我是身体/p/templatetemplate v-slot:footbutton确认/buttonbutton取消/button/template/BaseA
作用域插槽
作用域插槽定义slot插槽的同时是可以传值的给插槽上 可以绑定数据 将来 使用组件时可以用
场景封装表格组件
基本使用步骤
1. 给slot标签以添加属性的方式传值。
slot :iditem.id msg测试文本/slot
2. 所有添加属性都会收集到一个对象中
{id:3,msg:测试文本}
3. 在template中通过 #插槽名obj接收默认插槽名为 default
MyTable :listlisttemplate #defaultobjbutton clickdel(obj.id)删除/button/template/MyTable
商品列表实战 App.vue
templatediv idappMyTable :listlisttemplate #theadtd编号/tdtd图片/tdtd名称/tdtd标签/td/templatetemplate #tbody{item,index} td{{ index1 }}/tdtd{{ item.img }}/tdtd{{ item.name }}/tdtdMyEle v-modelitem.sign/MyEle/td/template/MyTable/div
/templatescriptimport MyEle from ./components/MyEle.vue
import MyTable from ./components/MyTable.vue
export default {data(){return{list:[{id:101,img:001,name:紫砂壶,sign:茶具},{id:102,img:001,name:皮鞋,sign:男鞋},{id:103,img:001,name:棉衣,sign:衣服},{id:104,img:001,name:毛衣,sign:衣服},{id:105,img:001,name:帽子,sign:衣服}]}},components:{MyEle,MyTable
},
methods:{},//局部注册指令
directives:{//指令名指令配置项color:{inserted(el,binding){el.style.colorbinding.value},update(el,binding){el.style.colorbinding.value}}
},}/scriptstyle scoped
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;margin-top: 60px;display: flex;justify-content: space-around;
}/styleMyTable.vue
template
div classmaintable border1theadtr!-- td编号/tdtd图片/tdtd名称/tdtd标签/td --slot namethead/slot/tr/theadtbodytr v-for(item,index) in list :keyitem.idslot nametbody :itemitem :indexindex /slot/tr/tbody/table
/div
/template
scriptexport default {props:{list:Array,}
}
/script
style scoped/style
Mytag.vue
template
div classmaindiv classele v-ifisShow clickisShowfalse{{ value }}/divdiv v-elseinput typetext :valuevalue v-focus keyup.enterupdate/div
/div/template
scriptexport default {props:{value:String},data(){return {isShow:true,}},directives:{focus:{inserted(el){el.focus()}}},methods:{update(e){this.$emit(input,e.target.value)this.isShowtrue}}
}
/script
style scoped
.ele{text-align: center;color:rgb(50, 49, 49);font-size: 15px;
}
input{padding: 3px 4px;color:gray;font-size: 13px;
}
/style
