Sard-Uniapp中PickerInput组件v-model与事件监听的正确使用方式-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_07816/article/details/148467033

Sard-Uniapp中PickerInput组件v-model与事件监听的正确使用方式

sard-uniapp sard-uniapp 是一套基于 Uniapp + Vue3 框架开发的兼容多端的 UI 组件库。项目地址: https://gitcode.com/gh_mirrors/sa/sard-uniapp

在Sard-Uniapp项目中，PickerInput组件是一个常用的选择器输入框组件。许多开发者在使用时会遇到v-model双向绑定与事件监听同时使用时的问题。本文将深入分析这个问题，并提供正确的解决方案。

问题现象

当开发者尝试同时使用v-model和@update:model-value事件监听时，发现事件监听不生效。这是因为对v-model的工作原理理解不够深入导致的。

v-model的本质

v-model是Vue提供的一个语法糖，它实际上是以下写法的简写：

<sar-picker-input 
  :model-value="userInfo.sex" 
  @update:model-value="userInfo.sex = $event" 
/>

当使用v-model时，Vue会自动为组件绑定modelValue属性和update:model-value事件。因此如果再手动添加@update:model-value监听，就会与v-model自动生成的事件处理函数冲突，导致自定义的事件处理函数不执行。

正确的解决方案

方案一：仅使用v-model

如果只需要简单的双向绑定，不需要额外处理逻辑，直接使用v-model即可：

<sar-picker-input v-model="userInfo.sex" />

方案二：拆分v-model实现自定义处理

当需要在值变化时执行特定逻辑时，应该拆分v-model，手动实现双向绑定：

<template>
  <sar-picker-input 
    :model-value="userInfo.sex" 
    @update:model-value="handleSexChange" 
  />
</template>

<script setup>
const userInfo = reactive({
  sex: ''
})

const handleSexChange = (value) => {
  userInfo.sex = value
  // 这里可以添加额外的处理逻辑
  console.log('性别已变更:', value)
  // 可以调用其他方法或触发其他操作
}
</script>