uni-app 自定义组件事件返回未携带dataset,而微信小程序原生事件携带dataset,你们的包装处理丢失了dataset

uni-app 自定义组件事件返回未携带dataset,而微信小程序原生事件携带dataset,你们的包装处理丢失了dataset

类别 信息
产品分类 uniapp/小程序/微信
PC开发环境 Windows
操作系统版本 win10
HBuilderX类型 正式
HBuilderX版本 3.1.4
项目创建方式 HBuilderX

示例代码:

<textutil :notitle="true" v-if="textutil" :maxlength="200" :value="farm[textareaKey]" @close="textutilClose" @blur="blurAll" @input="inpuAll" :data-key="textareaKey"  data-wechat="为自定义组件,任何自定义组件都是如此"  data-dataset="微信小程序事件返回不会携带"/>

操作步骤:

  • 创建一个自定义组件,或者使用任何自定义组件,添加dataset,事件返回就没有携带dataset

预期结果:

  • 任何事件返回携带dataset

实际结果:

  • 自定义组件时没有携带dataset

bug描述:

自定义组件事件返回没有携带dataset,微信小程序原生事件是携带dataset的,我查看编译后的vendor.js文件,发现事件处理没有把dataset返回,这是你们的编译BUG

这里是我修改后的代码,每次编译的代码都不一样,所以我每次都得去改这里

function we(t) {
    var e = this;
    t = fe(t);
    var n = (t.currentTarget || t.target).dataset;
    if (!n) return console.warn("事件信息不存在");
    var i = n.eventOpts || n["event-opts"];
    if (!i) return console.warn("事件信息不存在");
    var a = t.type, r = [];
    return i.forEach(function (n) {
        var i = n[0], o = n[1], s = i.charAt(0) === xe;
        i = s ? i.slice(1) : i;
        var l = i.charAt(0) === ye;
        i = l ? i.slice(1) : i;
        o && _e(a, i) && o.forEach(function (n) {
            var i = n[0];
            if (i) {
                var a = e.$vm;
                if (a.$options.generic && (a = be(a) || a), "$emit" === i) return void a.$emit.apply(a, ve(e.$vm, t, n[1], n[2], s, i));
                var o = a[i];
                if (!S(o)) throw new Error(" _vm.".concat(i, " is not a function"));
                if (l) {
                    if (o.once) return;
                    o.once = !0
                }
                var u = ve(e.$vm, t, n[1], n[2], s, i);
                for (var ui = 0; ui < u.length; ui++) {
                    u[ui] = setDataset(u[ui], t.currentTarget.dataset)
                }
                r.push(o.apply(a, (Array.isArray(u) ? u : []).concat([,,,,,,,,,, t])))
            }
        })
    }), "input" === a && 1 === r.length && "undefined" !== typeof r[0] ? r[0] : void 0
}
function setDataset(r, n) {
    for (var attr in n) {
        try {
            if (!(attr in r.currentTarget.dataset)) {
                r.currentTarget.dataset[attr] = n[attr]
            }
        } catch (k) {}
    }
    return r;
}

更多关于uni-app 自定义组件事件返回未携带dataset,而微信小程序原生事件携带dataset,你们的包装处理丢失了dataset的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

这个问题我以前好像也提过,不明白我说的意思,或者不解决发过话啊,或者告诉我怎么弄,不要每次我发布小程序都要去改这里吧

更多关于uni-app 自定义组件事件返回未携带dataset,而微信小程序原生事件携带dataset,你们的包装处理丢失了dataset的实战教程也可以访问 https://www.itying.com/category-93-b0.html


uniapp里,基本组件是带dataset的,但自定义组件上没有。 建议自己写时,弃用这种写法。

在 uni-app 中,自定义组件的事件机制与微信小程序原生确实存在差异。uni-app 为了跨端兼容,对事件对象进行了统一封装,导致 dataset 信息未直接透传到事件回调中。您观察到的现象是框架设计层面的处理方式,并非编译错误。

对于需要获取 dataset 的场景,建议通过以下方式解决:

  1. 在事件处理函数中,通过 event.currentTarget.dataset 直接访问
  2. 或将需要传递的数据作为事件参数显式传递

例如:

methods: {
  handleInput(event) {
    const dataset = event.currentTarget.dataset
    console.log('dataset:', dataset)
    // 处理业务逻辑
  }
}
回到顶部