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

vue2 中的v-model

v-model本质上是一个语法糖,如下代码

<input v-model="test">
<!--上面代码本质上就是下方代码-->
<input :value="test" @input="test = $event.target.value">

因此,对于一个带有 v-model 的组件(核心用法),它应该如下:

带有v-model的父组件通过绑定的value值(即v-model的绑定值)传给子组件,子组件通过 prop接收一个 value;
子组件利用oninput事件实时通过 $emit 触发父组件input 事件,并传入新值value给父组件;

父组件

<template>
    <div>
        <child v-model="msg" @input="msg = $event.target.value" />
        <!--<child :value="msg" @input="msg = $event.target.value" />-->
    </div>
</template>
<script>
import child from './components/Child.vue'
export default {
    components: {
        child
    },
    data() {
        return {
            msg: ''
        }
    }
}
</script>

子组件child

<template>
    <input type="text" :value="modelValue" @input="handleInput">
</template>
<script>
export default {
    name: 'Child',
    props:['value'],
    data() {
        return {
            modelValue: this.value
        }
    },
    methods: {
        handleInput(event) {
            this.$emit('input', event)
        }
    }
}

vue3中的 v-model

vue3中的v-model默认绑定的不是value,而是modelValue,接收的方法由input改为@update:modelValue。

<template>
  <child v-model="msg" />
  <p>{{msg}}</p>
</template>

<script lang="ts">
import { defineComponent,ref} from 'vue';
import child from './components/child/index.vue'

export default defineComponent({
  name: 'App',
  components:{
    child
  },
  setup(){
    const msg = ref('1')
    return{
      msg
    }
  }
});
</script>
<template>
    <input type="text" :value="modelValue" @input="onInput">
</template>
<script lang="ts">
import {defineComponent} from 'vue'
export default defineComponent({
    name:'ChildInput',
    props:{
        modelValue:{
            type:String
        }
    },
    setup(props, context){
        const onInput = (e: Event) =>{
            context.emit('update:modelValue',e.target.value)
        }
        return{
            onInput
        }
    }
})
</script>

到此这篇关于vue3 封装自定义组件v-model的文章就介绍到这了,更多相关vue3 自定义组件v-model内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • vue在自定义组件上使用v-model和.sync的方法实例

    目录 自定义事件 自定义组件的v-model .sync 修饰符 思考 总结 自定义事件 tips 推荐始终使用 kebab-case 的事件名.(v-on会将事件名自动转换为小写,避免匹配不到) changeData × change-data √ 自定义组件的v-model 用法: 父组件定义数据源(不需要定义修改数据的方法),在子组件标签上通过v-model="data"进行传递 默认传递的属性名是value,事件名为input.可以在子组件中配置model选项重命名属性名和事件

  • vue自定义组件如何通过v-model指令控制组件的隐藏、显示

    目录 通过v-model指令控制组件的隐藏.显示 1.新建一个叫child.vue的vue组件文件 2.将这个组件注册在全局 3.在父组件文件里面写入Child组件 在组件中实现v-model 1.v-model使用的属性和事件 2.自定义组件中输入框的v-model 3.通过v-model控制组件的显示 通过v-model指令控制组件的隐藏.显示 在开发项目的过程中,我们通常会有自定义组件的时候,那么在自定义组件后,我们如何去对组件进行类似于常用的UI组件库里面那些通过v-model来展示.隐

  • vue在组件中使用v-model的场景

    目录 一.使用场景 二.V-Model的本质 三.关键步骤 1. props 的使用 2. $emit 的使用 3. 关键的 model 四.不使用 model 选项的 v-model 1. 父组件 home 2. 子组件homeChild 3. 效果 五.用 model 选项的 组件使用 v-model 1.父组件 2. 子组件 一.使用场景 子组件想要使用父组件的值,又想去改父组件的值 二.V-Model的本质 1.给子组件的 value 传个变量 2.监听子组件的input事件,并且把传过

  • Vue2.0利用 v-model 实现组件props双向绑定的优美解决方案

    在项目中开始使用vue2来构建项目了,跟 vue1 很大的一处不同在于2 取消了props 的双向绑定,改成只能从父级传到子级的单向数据流,初衷当然是好的,为了避免双向绑定在项目中容易造成的数据混乱. 解决方案一 然后开始参考网上和github上的方案等等,发现很多解决方案是这样的 用data对象中创建一个props属性的副本 watch props属性 赋予data副本 来同步组件外对props的修改 watch data副本,emit一个函数 通知到组件外 这里以最常见的 modal为例子:

  • 在vue自定义组件中使用 v-model指令详情

    目录 一.前言 1.技术点提前知 二.在自定义的vue组件中使用v-model 1.效果演示图 2.自定义组件代码示例 3.在父组件使用自定义组件 三.优写时刻 一.前言 如何实现在自定义的vue组件中使用v-model,. 起先觉得挺简单,事实也挺简单,但似乎又没那么简单.因为深谈这涉及指令原理.数据绑定实现原理. 1.技术点提前知 要想在自定义组件中使用v-model,使用上其实就简单几步,这里以自定义input组件为例. 关键步骤: 1.props的使用.在自定义的vue文件中,声明父组件

  • vue2中如何自定义组件的v-model

    目录 如何自定义组件的v-model 父组件 子组件 SearchTab 子组件示例 vue2与vue3在自定义组件v-model的区别 在vue2中,通常这样实现 在vue3中,通过这样实现 如何自定义组件的v-model 工作中经常会涉及到父子组件数据更新和页面相应数据样式改变的问题. 通俗点来说,就是涉及到公共组件的可以抽离出来作为子组件,如果父组件中与子组件相关的数据改变,子组件中的数据也会改变,如果子组件的数据改变,则需要做一定的处理才能改变父组件中的相关数据. 处理方式:考虑使用 自

  • vue3 封装自定义组件v-model的示例

    首先要注意 vue3中 v-model 默认绑定的变量名变了,从原理的 value 改成了 modelValue,如果要改变变量的值,要执行一个事件 this.$emit("update:modelValue", value); <template> <div class="inline"> <input :type="password ? 'password' : 'text'" ref="input&q

  • vue 封装自定义组件之tabal列表编辑单元格组件实例代码

    vue 封装自定义组件 tabal列表编辑单元格组件 <template> <div class="editable-cell"> <div class="editable-cell-input-wrapper" v-if='editable'> <el-input class="editInput" v-model="cellValue" placeholder="请输入内

  • vue3封装放大镜组件的实例代码

    目录 组件基础结构 目的:实现图片放大镜功能 安装vueuse 功能实现 完整代码 总结 组件基础结构 结尾有完整代码可直接复制使用 目的:封装图片预览组件,实现鼠标悬停切换效果 落地代码: <template> <div class="goods-image"> <div class="middle"> <img :src="images[currIndex]" alt="">

  • vue3封装Notification组件的完整步骤记录

    目录 创建 插入 移除 在App.vue中使用 总结 跳过新手教程的小白,很多东西都不明白,不过是为了满足一下虚荣心,写代码的成就感 弹窗组件的思路基本一致:向body插入一段HTML.我将从创建.插入.移除这三个方面来说我的做法 先来创建文件吧 |-- packages |-- notification |-- index.js # 组件的入口 |-- src |-- Notification.vue # 模板 |-- notification.ts 创建 用到h,render,h是vue3对

  • vue3封装echarts组件最佳形式详解

    目录 思路 目录结构 组件代码 v-charts.vue useCharts.ts type.d.ts options/bar.ts 项目中使用 index.vue /hooks/useStatisDeviceByUserObject.ts 思路 项目中经常用到echarts,不做封装直接拿来使用也行,但不可避免要写很多重复的配置代码,封装稍不注意又会过度封装,丢失了扩展性和可读性.始终没有找到一个好的实践,偶然看到一篇文章,给了灵感.找到了一个目前认为用起来很舒服的封装. 结合项目需求,针对不

  • vue3封装计时器组件的方法

    背景 在一些商城类网页中打开商品详情都会有一个计数器来选择购买的数量,这样的计时器不仅会在商品详情页面显示还会在购物车里面有,那就可以把计时器封装成组件,以便于更好的复用以及后期维护 落地代码 <template> <div class="xtx-numbox"> <div class="label"><slot /></div> <div class="numbox"> &

  • vue3简单封装input组件和统一表单数据详解

    目录 前言 准备工作 用原生 input 封装 Input 封装表单数据 使用表单数据 总结 前言 vue3 支持用 jsx 实现组件,摆脱了 vue 文件式的组件,不再需要额外的指令,写法非常接近 React,减少记忆负担. 本文简单的练习,用 vue3 组件封装 input 组件和统一表单数据. 准备工作 用vue create example创建项目,参数大概如下: 用原生 input 原生的 input,主要是 value 和 change,数据在 change 的时候需要同步. App

  • Vue EventBus自定义组件事件传递

    前言 组件化应用构建是Vue的特点之一,因此我们在Vue的实际开发过程中会经常需要封装自定义组件,以提高开发的效率. 而组件在大部分情况下并不会孤立的存在,它必然会与父组件和兄弟组件产生数据的交互.所以在这里为大家总结两种组件数据交互的方式:EventBus和利用Vuex框架进行状态管理. 我会通过两种不同的交互方式,它们对于父子组件间数据交互和兄弟组件间数据交互. 由于篇幅关系,本文主要介绍EventBus进行数据消息传递:关于运用Vuex框架进行状态管理在下一篇文章中介绍. 案例介绍 本章节

随机推荐