收藏
回答

自定义组件 slot 上如何绑定组件内的方法?

如题,我正在做一个表单组件,开放了插槽的功能,可以在表单中通过插槽实现表单里面没有封装的组件,但是不知道要如何给插槽绑定组件的事件,翻了翻文档和社区没找到答案,有没有大佬知道怎么做的?

如图这样写绑定的是当前页面的事件,是不对的。

代码片段:https://developers.weixin.qq.com/s/Od7Msrmt7bi9

最后一次编辑于  2020-06-28
回答关注问题邀请回答
收藏

4 个回答

  • 卢霄霄
    卢霄霄
    2020-06-28

    wxs?

    2020-06-28
    有用 2
    回复 9
    • Xavier
      Xavier
      2020-06-28
      不是wxs的问题,现在想要给插槽绑定自定义组件里面的事件,文档及社区没有看到有相关的文章。
      2020-06-28
      回复
    • 卢霄霄
      卢霄霄
      2020-06-28回复Xavier
      https://developers.weixin.qq.com/s/017IXrmq7YiY
      我的意思是,可以写个wxs来做这件事。原理和页面内selectComponent一样。但是每个页面的wxml都要引入这个wxs。如果你用页面来做,也往Page内混入。
      2020-06-28
      回复
    • Xavier
      Xavier
      2020-06-28
      wxs里面能处理业务逻辑吗?我对于wxs的理解一直都是渲染时用来处理数据和显示内容的,是渲染层的js方法,能够用到的方法和函数有限。比如我想在input的时候校验输入内容,给data里面的某个对象的某个属性set值,在wxs里面可以实现吗?你如果有空的话可以看看我代码片段里面easy-form-item.js文件里面的handelInput方法的业务逻辑。
      2020-06-28
      回复
    • 卢霄霄
      卢霄霄
      2020-06-28回复Xavier
      我给的代码片段写了,wxs可以用 callMethod 调用组件或页面内的方法,只是省了你每个页面都写 selectComponent 那一段内容。不想看业务代码。。
      https://developers.weixin.qq.com/miniprogram/dev/framework/view/interactive-animation.html
      PS:这个文档URL是不是不太对。。
      2020-06-28
      回复
    • Xavier
      Xavier
      2020-06-28回复卢霄霄
      好像可行!!我去了解一下。先谢为敬。
      2020-06-28
      回复
    查看更多(4)
  • 锦卓
    锦卓
    2021-01-29

        

    <comForm id="comForm" >
      <view slot="bottom" class="flex flex-ac">
         <button class="cu-btn bg-green" bindtap="addBless">送祝福</button>
      </view>
    </comForm>
    
    
    
    
    addBless:function(){
    	this.selectComponent("#comForm").submit();
    }
    


    2021-01-29
    有用
    回复 2
    • Xavier
      Xavier
      2021-01-29
      嗯,写法是没问题,但是我是希望插槽直接去调用组件方法,页面里面不需要再定义额外的方法(不需要写addBless方法),已经采用了 wxs 实现。
      2021-01-29
      回复
    • Xavier
      Xavier
      2021-01-29
      其实就是把你这段代码写到了 wxs 里面而已,函数名固定了,插槽固定绑定这个 wxs 里面的函数,可以减少页面的js的代码量。
      2021-01-29
      回复
  • o0o有脾气的酸奶
    o0o有脾气的酸奶
    2020-06-28
    // 页面wxml
    <easy-form-item class="form-item-1">
      <input data-item="form-item-1" bindinput="slotInput">
    </easy-form-item>
    <easy-form-item class="form-item-2">
      <input data-item="form-item-2" bindinput="slotInput">
    </easy-form-item>
    ...
    
    // 页面.js
    Page({
     slotInput(e){
        var t = this, ds = e.currentTarget.dataset, formItem = t.selectComponent('.'+ds.item)
        formItem && formItem.handleInput(e)
     }
    })
    

    若认为该回答有用,给回答者点个[ 有用 ],让答案帮助更多的人

    2020-06-28
    有用
    回复 1
    • Xavier
      Xavier
      2020-06-28
      和我初步的想法相同,好像只能这样实现了,但是这个项目做完有打算开源【自己yy】,想要看看有没有更加简单的写法,如果实在是没办法可能也就只能这样了。
      2020-06-28
      回复
  • TNT
    TNT
    2020-06-28

    搞个代码片段出来吧 老哥。

    https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html

    2020-06-28
    有用
    回复 8
    • Xavier
      Xavier
      2020-06-28
      https://developers.weixin.qq.com/s/Od7Msrmt7bi9
      2020-06-28
      回复
    • Xavier
      Xavier
      2020-06-28
      老哥麻烦帮忙看一下,最下面的插槽1、插槽2不知道要怎么绑定easy-form-item组件里面的事件。
      2020-06-28
      回复
    • Xavier
      Xavier
      2020-06-28
      目前有一个思路是在index页面写事件,事件里面通过selectComponent选择自定义组件,然后再调用组件中的方法,但是这样做太麻烦了,要实现插槽绑定组件内方法太复杂。后期打算把这个项目开源的,想要让使用的人不用那么麻烦的去实现插槽这个效果。
      2020-06-28
      回复
    • TNT
      TNT
      2020-06-28回复Xavier
      https://developers.weixin.qq.com/s/mc8qUrm37Ai0
      2020-06-28
      回复
    • TNT
      TNT
      2020-06-28回复Xavier
      因为你的slot内的input组件是在当前页面。所以你的bindinput得在当前页面做
      2020-06-28
      回复
    查看更多(3)
登录 后发表内容
问题标签