Uniapp小程序事件对象：如何获取自定义属性？
2022-11-07 21:51:52
在Uniapp小程序中，可通过.prop修饰符将自定义属性绑定为DOM属性，从而在事件对象中正确获取其值。具体原因及操作如下：
问题根源：Vue.js的v-bind指令默认绑定的是HTML属性，而事件对象中的event.target访问的是DOM属性。由于HTML属性与DOM属性存在差异，直接通过event.target无法获取自定义属性值。例如，以下代码中msg-data无法被正确获取：
<view @click="handleClick" msg-data="hello">点击</view>解决方法：使用.prop修饰符将自定义属性显式绑定为DOM属性。修改后的代码如下：
<view @click="handleClick" :msg-data.prop="msgData">点击</view>其中，msgData为组件的数据属性（如data()中定义的变量）。通过.prop修饰符，msg-data会被绑定为DOM属性，此时event.target.msgData即可正确获取其值。
原理说明：
HTML属性 vs DOM属性：HTML属性是静态的，用于初始化DOM属性；而DOM属性是动态的，反映元素的当前状态。例如，<input value="初始值">的HTML属性value仅初始化输入框，后续用户输入会更新DOM属性value，但HTML属性保持不变。
Vue.js的绑定机制：默认情况下，v-bind（或简写:）绑定的是HTML属性。使用.prop修饰符后，Vue会直接操作DOM属性而非HTML属性，从而确保事件对象能访问到最新值。
注意事项：
仅适用于自定义属性：标准HTML属性（如class、id）无需使用.prop修饰符，Vue会自动处理其DOM属性同步。
小程序与Vue的兼容性：此问题与小程序架构无关，纯属Vue.js的数据绑定机制导致。其他基于Vue的小程序框架（如Taro、WePY）也可能遇到类似情况。
动态属性绑定：若自定义属性值需动态更新，需确保绑定的是组件的数据属性（如:msg-data.prop="dynamicValue"），而非静态字符串。
替代方案：若不想使用.prop修饰符，可通过event.currentTarget.dataset获取自定义属性（需使用data-*命名规范）。例如：
<view @click="handleClick" data-msg-data="hello">点击</view>methods: { handleClick(event) { console.log(event.currentTarget.dataset.msgData); // 输出 "hello" }}区别：data-*属性通过dataset获取，而.prop修饰符直接绑定DOM属性，两者在数据更新机制和命名规范上有所不同。
总结：在Uniapp小程序中，若需通过事件对象获取自定义属性，优先使用.prop修饰符确保属性绑定为DOM属性；若属性为静态值且符合data-*规范，也可通过dataset获取。理解HTML属性与DOM属性的差异是解决此类问题的关键。
热门标签
