标签导航:

小程序模板如何灵活传递参数?

小程序模板:巧用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元素,不适用于小程序组件。