Vue自定义组件实现v-model指令
Tips: 本文所描述的Vue均默认是Vue2版本
在我们初次接触Vue
的时候,一定会了解到一个语法糖,那就是v-model
指令,它带给我们的第一印象就是它可以实现双向绑定
那么,什么是双向绑定?通俗一点来说,就是当数据发生变化的时候,视图同时发生变化,这可以说是Vue
的精髓之处了
(不过关于双向绑定,后续可以出一篇更为详尽的博文来深入模拟一下Vue的实现,这里重点还是探讨实现自定义组件的v-model指令)
所以,在我们深入使用Vue
之后,编写一个自定义组件,如何手动实现一个v-model
的指令呢,今天我们就来详细探讨一下
v-model
指令的原理是什么?
v-bind
绑定一个value
属性v-on
监听当前元素的input
事件,当数据变化时,将值传递给value
实时更新数据
v-model
和v-bind:value
有什么区别?
自定义组件中,必定会使用v-bind
指令来实现组件之间值的传递,所以在我还是菜鸟的那段时间,我一直有个疑惑,
既然有的v-bind
指令,为什么还需要在自定义的组件中实现v-model
指令呢?在我实践了一番之后,我才明白,
v-model
既能够实现值的传递,也能够实现页面数据的实时变化,而v-bind
只是实现值的传递,如果需要实现实时变化的效果,
需要使用另外的方法修改变量的值,可以总结为下面两点
v-model
实现视图和数据的双向绑定,一者变化另一者也会同时变化v-bind
只会在初始化的时候将数据绑定到视图上,后续视图变化不会影响数据
撸一个v-model
看到这里,相信你也理解了为什么我们会需要在自定义的组件中自定义一个v-model指令,下面我们通过一个简易的示例来撸一个v-model
,
在此之前我们需要在一个空Vue
项目中,定义一个dad.vue文件,以及child.vue文件。
为了方便初学者学习,我将一个完整的简易示例项目放到了github仓库中供大家下载学习,
大家如果喜欢可以为了点一颗Star,Thanks♪(・ω・)ノ!!!
dad.vue
<template>
<div>
<child v-model='childName'></child>
</div>
</template>
<script>
import child from './child.vue';
export default {
name: 'dad',
components: {
child
},
data() {
return {
childName: '我是儿子'
};
},
methods: {}
};
</script>
child.vue
<template>
<!-- vue中的自定义组件中,若父组件中用v-model的话,其实相当于v-bind:value='***'并且v-on:input='***' -->
<!-- 因此子组件内部用props接收value值,用$emit触发input事件,默认传递value值和input事件是模拟v-model的默认规则 -->
<!-- 基础知识提示:@是v-on监听事件的简写,:是v-bind绑定属性的简写 -->
<div class="box-v-model">
<input type="text" class="input-v-model" :value="value" @input="inputChange" />
<!-- 简写的方式 -->
<!-- <input type="text" @input="value=$event.target.value" :value="value" /> -->
<div>{{ value }}</div>
</div>
</template>
<script>
export default {
name: "child",
props: {
value: {
type: String
}
},
methods: {
// $emit 方法可以触发当前实例上的事件,这里触发的事input事件,附加参数都会传给监听器回调
// input 事件在用户输入时触发,它是在元素值发生变化时立即触发
inputChange(e) {
this.$emit("input", e.target.value);
}
}
}
</script>
参考文档一 ———— vue自定义组件中的v-model
参考文档二 ———— Vue中v-model和v-bind:value的区别以及手动实现v-model
参考文档三 ———— Vue官方文档关于$emit的说明
我是 fx67ll.com,如果您发现本文有什么错误,欢迎在评论区讨论指正,感谢您的阅读!
如果您喜欢这篇文章,欢迎访问我的 本文github仓库地址,为我点一颗Star,Thanks~
转发请注明参考文章地址,非常感谢!!!
Vue自定义组件实现v-model指令的更多相关文章
- vue自定义组件(vue.use(),install)+全局组件+局部组件
相信大家都用过element-ui.mintui.iview等诸如此类的组件库,具体用法请参考:https://www.cnblogs.com/wangtong111/p/11522520.html ...
- vue自定义组件中的v-model简单解释
在使用iview框架的时候,经常会看到组件用v-model双向绑定数据,与传统步骤父组件通过props传值子组件,子组件发送$emit来修改值相比,这种方式避免操作子组件的同时再操作父组件,显得子组件 ...
- 8、VUE自定义组件
1.为什么要使用自定义组件? 自定义组件是用来封装复杂的内容,提高可重用性,比如封装复杂的表格组件.日历组件.图片轮播组件等. 2.自定义组件 2.1. 全局组件 全局组件是每个Vue对象都能使用的组 ...
- Vue - 自定义组件双向绑定
前言 无论在任何的语言或框架中,我们都提倡代码的复用性.对于Vue来说也是如此,相同的代码逻辑会被封装成组件,除了复用之外,更重要的是统一管理提高开发效率.我真就接手过一个项目,多个页面都会用到的列表 ...
- Vue自定义组件之v-model的使用
自定义组件之v-model的使用 v-model的语法糖可以为下面v-bind && @input联合完成: <input v-model="text"> ...
- Vue 自定义图片懒加载指令v-lazyload
Vue是可以自定义指令的,最近学习过程中遇见了一个需要图片懒加载的功能,最后参考了别人的代码和思路自己重新写了一遍.以下将详细介绍如何实现自定义指令v-lazyload. 先看如何使用这个指令: &l ...
- [转] vue自定义组件(通过Vue.use()来使用)即install的使用
在vue项目中,我们可以自定义组件,像element-ui一样使用Vue.use()方法来使用,具体实现方法: 1.首先新建一个Cmponent.vue文件 // Cmponent.vue<te ...
- vue 自定义组件销毁
今天在开发电商vue前端项目时,用户每次登出再换其它用户登录时,页面显示的用户名和左则导航都还是上个用户的,刚开始以为是localStorage中没有清除全局数据,然后在用户点击退出系统时手动清除lo ...
- Vue自定义组件插入值
我们自定义组件的时候有时候需要往组件里面插一些内容: //定义一个组件test,插值内容用slog来代替 export default { name: 'test', template:` <d ...
随机推荐
- 如何正确使用JMeter性能测试?紧扣面试实际要求
前段时间专门挑了一段时间在准备面试.经过两次面试后,有一些比较深刻的认识.对于企业要求来说,除了对专业理论知识考究之外,对测试工具这块也是看重的. 一.使用JMeter测试快速入门 1.线程组是什么 ...
- Hash窃取与传递
Hash窃取与传递 NTHASH(NTLM) 在 Windows中, 存储的密码Hash就叫做 NTHash,也叫做 NTLM,其中NTLM 全称是 "NT LAN Manager" ...
- spring提供的可拓展接口
接口:SmartLifecycle(https://www.jianshu.com/p/7b8f2a97c8f5)
- [no code][scrum meeting] Beta 4
例会时间:5月16日11:30,主持者:伦泽标 下次例会时间:5月18日11:30,主持者:叶开辉 一.工作汇报 人员 昨日完成任务 明日要完成的任务 乔玺华 完成整体框架设计与登录逻辑 与后端对接 ...
- Noip模拟12 2021.7.12
T1 interval 亏得昨天晚上改掉了T3并且理解了单调栈,今天一扫这题目就知道要用啥了. 先预处理出以a[i]为最大值的最大左右区间.然后再将a[i]取%!!!是的,要不然会影响单调栈的使用.. ...
- qgis3.16.6+vs2017再编译(debug+release)
参考 https://www.cnblogs.com/superbi/p/11188145.html 文章以及其它文章,对qggis3.16.6进行了重新编译 一.编译准备 1.Cygwin 1.1安 ...
- Machine learning(4-Linear Regression with multiple variables )
1.Multiple features So what the form of the hypothesis should be ? For convenience, define x0=1 At t ...
- .NET Core TLS 协议指定被我钻了空子~~~
前言 此前,测试小伙伴通过工具扫描,平台TLS SSL协议支持TLS v1.1,这不安全,TLS SSL协议至少是v1.2以上才行,想到我们早已将其协议仅支持v1.3,那应该非我们平台问题.我依然自信 ...
- Loto实践干货(8) 实测 保险丝 用示波器带电流探头
本文用LOTO示波器和5A的电流探头来实验两种常见类型的保险丝的保护曲线.一种是熔断型的,另一种是自恢复型的.我们通常需要在一些电路中对电流过大的情况做保护,比如防止用户把输出源短路,比如防止用户对电 ...
- Java测试开发--Comparable和Comparator接口(五)
Comparable 简介Comparable 是排序接口.若一个类实现了Comparable接口,就意味着"该类支持排序".此外,"实现Comparable接口的类的对 ...