uni-app自定义v-model失效问题

最新推荐文章于 2024-11-25 10:46:17 发布

原创最新推荐文章于 2024-11-25 10:46:17 发布 · 3.0k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript #uni-app

前端学习经历专栏收录该内容

47 篇文章

订阅专栏

本文介绍了Vue中使用`props`和`model`进行组件双向绑定的方法，通过`valueChange`方法实现内联更新，并强调了使用内置的prop和事件的重要性。

export default {
	props: {
		value: {
			type: String,
			default: ""
		}
	},
	model: {
		prop: "value",
		event: "input"
	},
	methods: {
		valueChange(val) {
			this.$emit("input", val)
		}
	}
}

直接上代码了，问题不想深究了，定义model的时候用value和input，不要自定义，就这样。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

sunyv1

关注关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
4
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

uni-app开发微信小程序时u-view自定义样式不生效

郭宝的博客

08-11

3091

在使用uni-app开发微信小程序时，设置原生样式后无效test1.vue文件在chrome浏览器中运行时，样式有效，截图如下：在微信小程序中运行时，样式失效，如下截图：1、使用style和class选择器设置样式无效，只能通过已有的class选择器来设置样式。...

uni-app 安卓消失的字符去哪里了？maxLength失效了！

m0_56600567的博客

05-29

1160

前段时间不是在开发uni-app的一个小应用嘛，然后今天测试发现，有一个地方在苹果是没有问题的，但是在安卓上出现了问题，附上安卓的截图。d的平台进行校验的时候，这串字符的长度正好50，所以消失的字符去哪里了？是字符消失了，还是计数器有问题了？用户可以通过长按输入框 → 选择“粘贴” → 插入大量文字，完全绕过 maxlength 的限制。在这里我是有限制maxLength=50的，而且，赋值字符串到。在组件中使用这个 Mixin 并传入 maxLength。外部调用时传入 maxLength。

4 条评论您还未登录，请先登录后发表或查看评论

4 条评论

super_bigger 2022.07.25
属实恼火，父组件改了数据，子组件不更新

这是小布丁呀 2022.06.28
被坑了好久，一样的问题

南风木兮丶 2022.04.11
牛逼！！！！因为vue3的自定义vmodel是emits("update:modelValue",XXX)，我在uniapp里也定义成update，结果h5有效，小程序无效！

【修复日常bug】（uniapp）微信小程序自定义组件无法触发（不执行）v-model双向绑定监听事件

技术大咖 Rohlin的博客

08-16

3867

问题概述数组数据改变后，页面上视图也重新渲染了，但是视图内的自定义组件绑定的v-model事件并没有执行；问题原因(举个例子) 在经过一番排查后，发现外层有v-if事件调用了handler函数进行判断导致的  <view v-for="(item,index) of list" :key="index">  <view v-if="handler(item)">

组件二次封装之自定义 v-model

lwx931449660的博客

01-06

8475

vue2.0 基于 uniapp uView UI 封装时间组件 v-model 的实现借助官方提供的model 选项，其实可以理解为一个语法糖用props 来接收父组件的数据，子组件通过model选项派发一个更新父组件数据的方法 v-model 可以理解为下面两步： :value="value" @input="value=$event.target.value" 来看vue 官方对 model 选项的描述：允许一个自定义组件在使用v-model时定制 prop 和 event。..

uniapp 中使用 v-model 不生效解决方案

weixin_53431104的博客

01-03

2504

在微信开发者工具中先点击编译再点击预览进行扫码调试，而不是选择真机调试。或者将真机调试版本修改为2.0，而不是使用1.0。

uniapp 微信小程序：v-model双向绑定问题（自定义 props 名无效）

灵台方寸山斜月三星洞

07-28

8396

父传子props子传父this.$emit('事件名', '数据');使用sync修饰符，实现支持同步数据。

Uni-app 笔记二 (项目笔记)

u014105655的博客

01-29

994

Uniapp 项目笔记

uni-app心得之通过云数据库实现简单的登录和注册

Yellow_ALBION的博客

06-16

1694

新手小白学习心得，通过云数据库实现简单的登录与注册

解决uni-app官方弹框popup关闭不了问题；/pages/extUI/popup/popup；uni-app弹框popup打开调用事件。unin-app弹框封装；

最新发布

07-04

在 uni-app 中声明变量后，如果页面上未正确显示数据，通常是由于数据绑定方式不正确、数据更新未触发响应式机制或赋值过程中引用了对象的地址而非创建新副本所导致。以下是常见的解决方案和注意事项： ### 数据绑定与更新机制 1. **确保使用 `data` 函数返回变量** 在 Vue 和 uni-app 的组件中，所有需要响应式更新的数据必须在 `data()` 函数中返回。这样可以保证每个组件实例拥有独立的数据副本。 ```javascript export default { data() { return { message: 'Hello UniApp', infoDetail: {} }; } }; ``` 2. **使用 `v-model` 或 `{{ }}` 正确绑定数据** 页面上的输入控件应使用 `v-model` 实现双向绑定，而文本内容则使用插值表达式 `{{ }}` 显示数据。 ```html <input type="text" v-model="message" /> <view>{{ message }}</view> ``` 3. **避免直接修改 props 或父组件传来的数据** 如果尝试将父组件传递过来的数据直接赋值给子组件的 `data` 属性并进行修改，可能会导致响应式失效。应使用 `.sync` 修饰符或 `v-model` 进行父子通信。 4. **使用深度克隆避免引用类型同步更新问题** 当两个对象引用同一个内存地址时，修改其中一个对象会影响另一个对象。可以使用 `JSON.parse(JSON.stringify(obj))` 或展开运算符 `...` 来实现深拷贝。 ```javascript onLoad(e) { this.infoDetail = JSON.parse(JSON.stringify(this.userInfo)); // 深拷贝 // 或者使用 ES6 展开运算符 this.infoDetail = { ...this.userInfo }; } ``` 5. **手动触发更新（仅在极少数情况下使用）** 如果数据已经更改但页面未更新，可以尝试调用 `$forceUpdate()` 方法强制更新视图，但这通常表明数据结构设计存在问题。 ```javascript this.$forceUpdate(); ``` 6. **检查是否误用了全局变量访问方式** 全局变量应在 `App.vue` 中定义，并通过 `this.$getApp().globalData` 访问。如果未正确访问或修改全局变量，也可能导致数据未正确显示。 ```javascript const app = this.$getApp(); app.globalData.userLoggedIn = true; ``` ### 常见错误排查 - **检查控制台是否有报错信息**：如 `TypeError` 或 `undefined` 异常，可能表示变量未正确初始化。 - **确认生命周期钩子是否正确执行**：例如 `onLoad` 或 `onShow` 中的数据赋值是否被遗漏或异步请求未完成。 - **避免在 `mounted` 钩子中直接操作 DOM**：uni-app 推荐使用数据驱动的方式更新界面，而不是直接操作 DOM 节点。 ### 示例代码：正确绑定与更新数据 ```html <template> <view> <input type="text" v-model="infoDetail.username" placeholder="请输入用户名" /> <view>当前用户名：{{ infoDetail.username }}</view> </view> </template> <script> export default { data() { return { infoDetail: {} }; }, onLoad(e) { // 使用深拷贝避免引用同步问题 this.infoDetail = JSON.parse(JSON.stringify(this.userInfo)); } }; </script> ```