小程序模板:巧用data-属性灵活传递参数
为了提高小程序代码的可维护性和可读性,通常会将模板和逻辑代码分离。但有时需要在模板中传递参数。本文介绍一种高效方法,避免传统方法的冲突问题。
传统方法常使用catch:tap事件绑定,在JS方法中接收参数。然而,当type等参数已被占用时,这种方法就显得力不从心。
小程序的data-属性提供了解决方案。它允许在模板元素中添加自定义属性,并在JS方法中通过e.target.dataset访问。
代码示例
以下示例演示如何使用data-属性传递参数:
<view data-id="1" bindtap="saveInfo">保存</view>
saveInfo: function (e) { let id = e.target.dataset.id; console.log("id: " + id); // 输出:id: 1 },
在这个例子中,e.target.dataset.id的值为1。
重要提示: data-属性仅适用于DOM元素,不适用于小程序组件。