uni-app 小程序环境 vue3 组件 update:modelValue 无效

uni-app 小程序环境 vue3 组件 update:modelValue 无效

项目属性 值
产品分类 uniapp/小程序/微信
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 10
HBuilderX类型 正式
HBuilderX版本号 3.2.3
第三方开发者工具版本号 1.05.2107090
基础库版本号 2.19.5
项目创建方式 HBuilderX

示例代码：

<template>  
    <view @tap="change">  
        组件内：{{modelValue}}  
    </view>  
</template>  

<script>  
    export default {  
        name:"comp",  
        props: ['modelValue'],  
        data() {  
            return {  

            };  
        },  
        methods: {  
            change(){  
                this.$emit('update:modelValue', Math.random())  
            }  
        }  
    }  
</script>

<comp v-model="title"></comp>

这个组件，在小程序环境， 点击没有任何变化， H5是好用的

操作步骤：

如上

预期结果：

如上

实际结果：

如上

bug描述：

vue3，小程序环境，组件的update:modelValue，无效，v-model不会有任何效果


更多关于uni-app 小程序环境 vue3 组件 update:modelValue 无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

问题复现，后续优化，已加分，感谢您的反馈！

更多关于uni-app 小程序环境 vue3 组件 update:modelValue 无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


核心功能…

这个什么时候更新啊？

最新的HBuilderX Alpha已支持

在 uni-app 的 Vue3 环境下，小程序平台确实存在 update:modelValue 事件无法正常触发的问题。这是因为小程序环境的事件机制与 H5 不同，导致自定义事件名中的冒号 : 可能无法被正确识别和处理。

解决方案：

  1. 使用 v-model 的参数形式（推荐）： 将组件内的 update:modelValue 改为 update:model-value（短横线命名法），这是小程序环境下更兼容的写法。

    <template>  
    <view @tap="change">  
        组件内：{{modelValue}}  
    </view>  
</template>  

<script>  
    export default {  
        name:"comp",  
        props: ['modelValue'],  
        methods: {  
            change(){  
                this.$emit('update:model-value', Math.random())  
            }  
        }  
    }  
</script>

    父组件使用方式不变：

    <comp v-model="title"></comp>

  2. 使用 v-model 的完整写法： 如果上述方法仍不生效，可以显式地拆解 v-model 的语法糖，分别绑定 modelValue 和监听 update:modelValue 事件。

    父组件：

    <comp :modelValue="title" [@update](/user/update):modelValue="title = $event"></comp>
回到顶部