uni-app 中给 slot 传递参数的一种方法

在使用 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>

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值