vue3自定义input组件注意事项

最新推荐文章于 2025-07-03 11:10:54 发布

自夏

最新推荐文章于 2025-07-03 11:10:54 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： uniapp 文章标签： vue typescript

本文链接：https://blog.youkuaiyun.com/qq_39970857/article/details/124181509

uniapp 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了在uniapp中封装input输入框时遇到的问题及解决方案。特别指出，使用自定义组件时，应当使用`:value`结合`@input`进行数据双向绑定，而非`v-model`，否则在手机端可能出现错误。同时提供了自定义组件m-input的代码示例，并展示了如何在父组件中正确获取和更新input的值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用uniapp 封装input输入框注意事项

使用 input 标签时数据双向绑定一定要使用 :value=“modelValue” 不要使用 v-model=“modelValue”
否者会出现，浏览器能够正常但是手机都正常
[JS Framework] Failed to execute the callback function: ReferenceError: Can’t find variable: modelValue __ERROR

自定义组件页面 m-input

<input type="text" :value="modelValue" @input="input">

<script lang="ts" setup>
import {ref,defineComponent ,defineExpose} from 'vue';

		//默认传递过来的参数
		defineProps({
			modelValue:String|Number
		})
		// 更新数据
		const emit = defineEmits(['update:modelValue'])
		const input = (e)=>{
			console.log(e.detail.value,'自定义的input输入值');
			// 更新值
			emit('update:modelValue',e.detail.value)
		}
		//defineExpose()
</script>

父组件

<template>
	<m-input ref="sonRef" v-model='aa'></m-input>
	<button type="default" @click="handleClick">按钮</button>
</template>
<script lang="ts" setup>
	import {ref} from'vue'
	import mInput from "@/components/sonRef"
	import selectData from '@/components/selectData'
	const aa =ref(132456)  
	const handleClick = ()=>{
		const getselectdata = ref<any>(null);
		　console.log(aa.value) // 获取输入的值
	}
</script>