vue3自定义input组件注意事项

最新推荐文章于 2025-08-20 00:00:00 发布

原创最新推荐文章于 2025-08-20 00:00:00 发布 · 1.6k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

uniapp

当前文章被收录于：

uniapp

13 篇文章 1 人学习

uniapp

订阅专栏查看详情

当前文章被以下社区和专栏收录：

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

使用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>