网站排版教程,东明住房和城乡建设局网站,重庆企业网站营销设计,家政公司网站怎么做最近在封装一个List组件#xff0c;外部传给我数据#xff0c;我循环后将每个Item部分slot到外部#xff0c;由调用者自己去写item布局#xff0c;类似ElementUI、iView的Tabe列表。 List:
view v-iflist.length 0 classlist-scroll__item外部传给我数据我循环后将每个Item部分slot到外部由调用者自己去写item布局类似ElementUI、iView的Tabe列表。 List:
view v-iflist.length 0 classlist-scroll__item v-for(item, index) in list :keyitem.id clickonClickItem(item)slot :itemitem :indexindex/
/view
调用 list :listlistitem slot-scope{item} :itemitem/item/list item是自定义每一项的样式组件可自行脑补。 **不出意外这样就可以正常显示列表数据了**如果出了意外只能显示一项请配置slot编译模式。scopedSlotsCompiler:legacy 为旧版编译模式新版模式 auto 与 augmented可切换尝试
不出意外就能正常显示了 我现在还有第二个需求就是item里有点击事件我要将我点击的项目传递给每个slot的item然后每个item根据数据做出变化。
现在改动一下
list :listlistitem slot-scope{item} :itemitem :currentcurrentItem clickItem(e)currentIteme/item/list
currentItem:是页面数据 clickItem是接收item内部点击事件的数据然后赋值给currentItem,
不知道您看明白了没总的来说就是我在某一个item发生点击事件的时候将传出来的值赋值给页面变量currentItem然后把currentItem赋值给每个item只有点击的item跟currentItem是一个时才做出某些变动如果不一样则还原之前的变动。
就是这么个再平常不过的事件但是currentItem死活都传不过去具体讨论解释可参考
https://github.com/dcloudio/uni-app/issues/495
反正就是无解实在没有办法我就想其他笨办法先解决问题吧。
1、首先将:currentcurrentItem移动到list组件上然后list内增加props为current的接收对象就变为
list :listlist :currentcurrentItem item slot-scope{item} :itemitem clickItem(e)currentIteme/item/list
List内部
props:{list: { type: Array, default: () [] },
current:{ type:Object, default:(){} }
}
2、这样list组件就能接收到页面参数了然后将list内部slot部分改动如下,将接收的参数抛出去
view v-iflist.length 0 classlist-scroll__item v-for(item, index) in list :keyitem.id clickonClickItem(item)slot :itemitem :indexindex :currentcurrent/
/view
3、 到此外面的slot item部分就能接收到该参数了
list :listlist :currentcurrentItemitem slot-scope{item,current} :itemitem :currentcurrent clickItem(e)currentIteme/item/list
到此一个连贯的传值操作就结束了总结如下:
slot部分不能直接传递页面参数也就是作用域以外的参数但是变相可以传递
1、先传递给父组件并且父组件内props接收该参数
2、父组件内slot将接收的参数slot出去抛给slot复写的人
3、复写slot的人在接收该参数传递给自己复写的item部分自己的item增加点击事件变更传递给父组件的值slot部分的item也就会接收到该值。
