uni-app 中给 slot 传递参数的一种方法
在使用 uni-app自定义组件时遇到了一个问题,我引用了DCloud_UNI_Neil的“自定义 Modal 组件”(https://ext.dcloud.net.cn/plugin?id=134#rating),在此首先对作者表示感谢!在使用时,若 slot 中要使用父组件本身的数据时是没有办法,其它带slot的组件也是一样的。琢磨了一下,明白了 vueslot的原理:父...
在使用 uni-app 自定义组件时遇到了一个问题,我引用了DCloud_UNI_Neil 的“自定义 Modal 组件”(https://ext.dcloud.net.cn/plugin?id=134#rating),在此首先对作者表示感谢!
在使用时,若 slot 中要使用父组件本身的数据时是没有办法,其它带slot 的组件也是一样的。琢磨了一下,明白了 vue slot 的原理:父组件调用子组件,再由子组件调用 slot 中内容渲染。所以,虽然 slot 中内容位于父组件中,但却不能直接使用父组件中的成员。于是想到了一个解决办法。
1. 将作者的组件(neil-model.vue)中做如下修改:(对不起,如有侵权,我马上删除)
1)在props中加入 item(可以是其它名字,现假定为item)
props:{
..., //其它属性
item:{type:Object, default:{}} //可以在 slot 中引用的。
}
2) 在 <slot 中添加一个属性,名字也要和props中定义的一样(这样,调用者才好引用),如下:
<template v-else><slot :item="item"></slot></template>
2. 在父组件中将要在 slot 中使用数据对象传递给 neil-modal,通过以上修改后,父组件在slot中就可以引用 item了。例子如下:
<neil-modal :show="show" :item="myData" ....>
{{item.prop1}} <!-- 这时不能再用 myData了,要用上面设置的属性名(红色部分保持一致) -->
{{item.prop2}}
</neil-modal>
更多推荐
所有评论(0)