公告列表
公告列表
收藏
回答

自定义组件 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
      赞
      回复
  • 九歌^
    九歌^
    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
      赞
      回复
    • 九歌^
      九歌^
      2020-06-28回复Xavier
      https://developers.weixin.qq.com/s/mc8qUrm37Ai0
      2020-06-28
      赞
      回复
    • 九歌^
      九歌^
      2020-06-28回复Xavier
      因为你的slot内的input组件是在当前页面。所以你的bindinput得在当前页面做
      2020-06-28
      赞
      回复
    查看更多(3)
请 登录 后发表内容
相关问题
相关文档
问题标签
slot自定义组件slot绑定事件