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

 

Logo

前往低代码交流专区

更多推荐