vue3 封装自定义组件v-model

首先要注意 vue3中 v-model 默认绑定的变量名变了，从原理的 value 改成了 modelValue，
如果要改变变量的值，要执行一个事件 this.$emit("update:modelValue", value);

<template>
	<div class="inline">
		<input :type="password ? 'password' : 'text'" ref="input" @input="handleInput" @blur="handleBlur($event.target.value)" :placeholder="placeholder" />
	</div>
</template>
<script>
export default {
	name: "dg-Input",
	props: {
		type: {
			type: String,
			requided: true,
		},
		placeholder: {
			type: String,
		},
		password: {
			default: false,
		},
		modelValue: [String, Number],
	},
	data() {
		return {};
	},
	computed: {
		nativeInputValue() {
			return this.modelValue === null || this.modelValue === undefined ? "" : String(this.modelValue);
		},
	},
	methods: {
		handleInput(event) {
			let value = event.target.value;
			this.$emit("update:modelValue", value);
			this.$emit("input", value);
			this.$nextTick(this.setNativeInputValue);
		},
		setNativeInputValue() {
			const input = this.$refs.input;
			if (input.value === this.nativeInputValue) return;
			input.value = this.nativeInputValue;
		},

	
	},
	mounted() {
		this.setNativeInputValue();
	},
};
</script>
<style lang="scss" scoped>
.inline {
	display: inline-block;
	input {
		width: 100%;
		height: 100%;
		padding-left: 5px;
	}
}
</style>

vue3文档地址

最后

以上就是务实橘子为你收集整理的vue3 封装自定义组件v-model的全部内容，希望文章能够帮你解决vue3 封装自定义组件v-model所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。