网站登陆口提交网站,网站做外链的方式,濮阳的网站建设,备案时暂时关闭网站目录
一、默认插槽
#xff08;1#xff09;概念
#xff08;2#xff09;代码展示
#xff08;3#xff09;后备内容
二、具名插槽
#xff08;1#xff09;概念
#xff08;2#xff09;代码展示
三、作用域插槽 #xff08;1#xff09;概念 #xff0…目录
一、默认插槽
1概念
2代码展示
3后备内容
二、具名插槽
1概念
2代码展示
三、作用域插槽 1概念 2使用步骤
3用例展示 一、默认插槽
1概念 插槽究竟是什么呢简单来说插槽就是用于决定将所携带的内容插入到指定的某个位置。举个例子比如说下面的图 加入头部和底部都是写死的但是我们希望主题部分不写死那么这时候我们就需要用插槽了也就是说插槽的作用就是让组件内部的一些结构支持自定义。 2代码展示 //fa.vue 子组件
templatediv classfadiv classheader styleborder: 1px solid black;width: 200px; height: 200px; h1我是头部/h1/divdiv classmain styleborder: 1px solid red; width: 200px; height: 200px;!-- 通过slot标签作为展示 --slot/slot/divdiv classfooter styleborder: 1px solid blue; width: 200px; height: 200px;hrh1我是底部/h1/div/div
/template //父组件 App.vuescript setup
import fa from ./components/fa.vue;
/scripttemplatefa我是动态插槽----/fa/templatestyle scoped/style 3后备内容 封装组件时可以为预留的slot插槽提供后备内容默认内容。 效果 外部使用组件时不传东西则slot会显示后备内容 外部如果使用组件传东西则slot整体会被换掉显示传的东西。 div classmain styleborder: 1px solid red; width: 200px; height: 200px;!-- 通过slot标签作为展示 --slotp不传东西就显示我/p/slot/div 二、具名插槽
1概念 与前面的默认插槽的作用也是一样的不过具名具名就是具有名字的插槽起名字自然就是为了辨别是哪一个也就是说一个组件内有多处结构需要外部传入标签进行定制。 如下图的场景 这次我想让头部主体和底部三部分都可以动态展示。 2代码展示 //App.vue 父组件templatefa!-- 通过template配合名字对应着标签#head是简写完整写法是v-slot:head --template #head我是头部/template
template #main
我是中间的
/template
template #footer我是下面的底部
/template/fa/template //fa.vue 子组件templatediv classfadiv classheader styleborder: 1px solid black;width: 200px; height: 100px; !-- 多个slot使用name属性区分名字 --slot namehead/slot/divdiv classmain styleborder: 1px solid red; width: 200px; height: 100px;!-- 通过slot标签作为展示 --slot namemain/slot/divdiv classfooter styleborder: 1px solid blue; width: 200px; height: 100px;slot namefooter/slot/div/div
/templatescript setup/scriptstyle/style 三、作用域插槽
1概念 其实如果将插槽分类的话插槽只分成两种分别是默认插槽和具名插槽作用域插槽并不在其中。 作用域插槽就是在定义slot插槽的同时它是可以传值的给插槽绑定数据将来使用组件时可以用父传子。 2使用步骤 1给slot标签以添加属性的方式传值 slot :iditem.id msg测试/slot 2所有添加的属性都会被收集到一个对象中 {
id:3,
msg:测试
} 3在template中通过#插槽名obj接收默认插槽名为default fa :listlisttemplate #defaultobjbutton clickdel(obj.id)删除/button/template
/fa 3用例展示 需求创建一个表格对表格每一行数据都可以进行删除根据他的id值 //App.vuescript setup
import fa from ./components/fa.vue;import { ref } from vue
const listref([{id:1,name:张三,age:19},{id:2,name:王五,age:28},{id:3,name:赵楼,age:21},{id:4,name:宋以,age:31},{id:5,name:石头,age:16}
])const del(id){console.log(id)//删除操作就是简单的数组过滤list.valuelist.value.filter(ii.id!id)
}
/scripttemplatefa :listlisttemplate #defaultobj这个是{{ obj.msg }}button clickdel(obj.obj.id)删除/button/template/fa/templatestyle scoped/style//fa.vuetemplatediv classfatable styleborder: 1px solid black;width: 500px;height: 500px;text-align: center; border-collapse: collapse;theadtd序号/tdtdid/tdtdname/tdtdage/tdtd操作/td/theadtbodytr v-for(item,index) in list :keyitem.idtd{{ index }}/tdtd{{ item.id }}/tdtd{{ item.name }}/tdtd{{ item.age }}/td!-- 特殊定制使用插槽占位 --td!-- 传递数据以对象的形式来接收比如下面的数据接收是{obj:{id:1,name:.......}msg:测试} --slot :objitem msg测试/slot/td/tr/tbody/tablediv{{ list }}/div/div
/templatescript setupconst propsdefineProps({list:Array
})
console.log(子组件)
console.log(props.list)
/scriptstyle
td,tr{border:1px solid black;
}/style
