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) 在          
2. 在父组件中将要在 slot 中使用数据对象传递给 neil-modal,通过以上修改后,父组件在slot中就可以引用 item了。例子如下:
    item="myData" ....>
          {{item.prop1}}  
          {{item.prop2}}
   

 

你可能感兴趣的:(uni-app)