新公司董事长致辞做网站,公众号推广文案范文,微企点建站平台介绍,球场 技术支持 东莞网站建设文章目录 插槽1.插槽 - 默认插槽(组件内可以定制一处结构)2.插槽 - 后备内容#xff08;默认值#xff09;3.插槽 - 具名插槽(组件内可以定制多处结构)4.作用域插槽(插槽的一个传参语法) 插槽
插槽分类:默认插槽和具名插槽
1.插槽 - 默认插槽(组件内可以定制一处结构) 作用… 文章目录 插槽1.插槽 - 默认插槽(组件内可以定制一处结构)2.插槽 - 后备内容默认值3.插槽 - 具名插槽(组件内可以定制多处结构)4.作用域插槽(插槽的一个传参语法) 插槽
插槽分类:默认插槽和具名插槽
1.插槽 - 默认插槽(组件内可以定制一处结构) 作用让租价内部的一些结构支持自定义 需求要在页面中显示一个对话框封装成一个组件 问题组件的内容部分不希望写死希望能够使用的时候自定义怎么办插槽 插槽的基本语法
组件内需要定制的结构部分改用slot/slot使用组件时MyDialog/MyDialog内部标签传入结构替换slot
templatediv classdialogdiv classdialog-headerh3友情提示/h3/divdiv classdialog-contentslot/slot//用slot占位 //MyDialog你去确定要退出本系统吗/div MyDialog //会被填入slot位置div classdialog-footerbutton取消/buttonbutton确认/button/div/div
/templateApp.vue
templatediv!-- 在我们使用组件时在组建标签内填入内容 --MyDialog你确认要删除吗/MyDialogMyDialog你确认要退出吗/MyDialog/div
/template~.vue
templatediv classdialogdiv classdialog-headerh3友情提示/h3span classclose✖️/span/divdiv classdialog-content!-- 在需要定制的位置使用slot占位 --slot/slot/divdiv classdialog-footerbutton取消/buttonbutton确认/button/div/div
/template2.插槽 - 后备内容默认值
前言通过插槽完成了内容的定制传什么显示什么但是如果不传则是空白 插槽的后备内容封装组件时可以为预留的插槽提供后备内容默认内容 语法在slot标签内防止内容作为默认内容 3.插槽 - 具名插槽(组件内可以定制多处结构)
需求一个组件内有多处结构需要外部传入标签。进行定制 默认插槽一个的定制位置 具名插槽语法 多个slot使用name属性区分名字 template配合v-slot名字来分发对应的标签 v-slot插槽名 可以简化成 #插槽名 4.作用域插槽(插槽的一个传参语法)
作用域插槽:定义 slot 插槽的同时,是可以传值的.给插槽上可以绑定数据,将来使用组件时可以用 场景:封装表格组件(表格长得一样,但是数据不一样) 通过父传子,将数据传递进去,动态渲染表格内容利用默认插槽定制操作这一列删除或查看都需要用到 当前的id ,属于 组件内部的数据,通过作用域插槽 传值绑定,进而使用 基本使用步骤: 给slot标签,以添加属性的方式传值 所有添加的属性,都会被收集到一个对象中 在template.同股票 #插槽名obj接收(这个obj是一个局部变量,我们可以起成不同的名字),默认插槽名为default App.vue
templatedivMyTable :datalisttemplate #defaultobj!--通过template #插槽名变量名接收--button clickdel(obj.row.id)删除/button/template/MyTableMyTable :datalist2template #default{ row }button clickshow(row)查看/button/template/MyTable/div
/templatescript
import MyTable from ./components/MyTable.vue
export default {data () {return {list: [{ id: 1, name: 张小花, age: 18 },{ id: 2, name: 孙大明, age: 19 },{ id: 3, name: 刘德忠, age: 17 },],list2: [{ id: 1, name: 赵小云, age: 18 },{ id: 2, name: 刘蓓蓓, age: 19 },{ id: 3, name: 姜肖泰, age: 17 },]}},methods:{del(id){this.listthis.list.filter(item item.id !id)}, show (row) {console.loh(row)alert(姓名: ${row.name}; 年纪: ${row.age})}},components: {MyTable}
}
/script~.vue
templatetable classmy-tabletheadtrth序号/thth姓名/thth年纪/thth操作/th/tr/theadtbodytr v-for(item,index) in data :keyitem.idtd{{ index 1 }}/tdtd{{ item.name }}/tdtd{{ item.age }}/tdtd!-- 1.给slot标签添加属性名以传参 --slot :rowitem msg测试文本/slot!--苛以在插槽的位置传参方便删除del()--!-- 2.将所有属性添加到一个对象中 --!--{row:{id:2,name:孙大明age:19},msg:测试文本}--/td/tr/tbody/table
/templatescript
export default {props: {data: Array,},
}
/script
