Tips: 本文所描述的Vue均默认是Vue2版本

在我们初次接触Vue的时候,一定会了解到一个语法糖,那就是v-model指令,它带给我们的第一印象就是它可以实现双向绑定

那么,什么是双向绑定?通俗一点来说,就是当数据发生变化的时候,视图同时发生变化,这可以说是Vue的精髓之处了

(不过关于双向绑定,后续可以出一篇更为详尽的博文来深入模拟一下Vue的实现,这里重点还是探讨实现自定义组件的v-model指令)

所以,在我们深入使用Vue之后,编写一个自定义组件,如何手动实现一个v-model的指令呢,今天我们就来详细探讨一下

v-model指令的原理是什么?

  1. v-bind绑定一个value属性
  2. v-on监听当前元素的input事件,当数据变化时,将值传递给value实时更新数据

v-modelv-bind:value有什么区别?

自定义组件中,必定会使用v-bind指令来实现组件之间值的传递,所以在我还是菜鸟的那段时间,我一直有个疑惑,

既然有的v-bind指令,为什么还需要在自定义的组件中实现v-model指令呢?在我实践了一番之后,我才明白,

v-model既能够实现值的传递,也能够实现页面数据的实时变化,而v-bind只是实现值的传递,如果需要实现实时变化的效果,

需要使用另外的方法修改变量的值,可以总结为下面两点

  1. v-model实现视图和数据的双向绑定,一者变化另一者也会同时变化
  2. 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指令的更多相关文章

  1. vue自定义组件(vue.use(),install)+全局组件+局部组件

    相信大家都用过element-ui.mintui.iview等诸如此类的组件库,具体用法请参考:https://www.cnblogs.com/wangtong111/p/11522520.html ...

  2. vue自定义组件中的v-model简单解释

    在使用iview框架的时候,经常会看到组件用v-model双向绑定数据,与传统步骤父组件通过props传值子组件,子组件发送$emit来修改值相比,这种方式避免操作子组件的同时再操作父组件,显得子组件 ...

  3. 8、VUE自定义组件

    1.为什么要使用自定义组件? 自定义组件是用来封装复杂的内容,提高可重用性,比如封装复杂的表格组件.日历组件.图片轮播组件等. 2.自定义组件 2.1. 全局组件 全局组件是每个Vue对象都能使用的组 ...

  4. Vue - 自定义组件双向绑定

    前言 无论在任何的语言或框架中,我们都提倡代码的复用性.对于Vue来说也是如此,相同的代码逻辑会被封装成组件,除了复用之外,更重要的是统一管理提高开发效率.我真就接手过一个项目,多个页面都会用到的列表 ...

  5. Vue自定义组件之v-model的使用

    自定义组件之v-model的使用 v-model的语法糖可以为下面v-bind && @input联合完成: <input v-model="text"> ...

  6. Vue 自定义图片懒加载指令v-lazyload

    Vue是可以自定义指令的,最近学习过程中遇见了一个需要图片懒加载的功能,最后参考了别人的代码和思路自己重新写了一遍.以下将详细介绍如何实现自定义指令v-lazyload. 先看如何使用这个指令: &l ...

  7. [转] vue自定义组件(通过Vue.use()来使用)即install的使用

    在vue项目中,我们可以自定义组件,像element-ui一样使用Vue.use()方法来使用,具体实现方法: 1.首先新建一个Cmponent.vue文件 // Cmponent.vue<te ...

  8. vue 自定义组件销毁

    今天在开发电商vue前端项目时,用户每次登出再换其它用户登录时,页面显示的用户名和左则导航都还是上个用户的,刚开始以为是localStorage中没有清除全局数据,然后在用户点击退出系统时手动清除lo ...

  9. Vue自定义组件插入值

    我们自定义组件的时候有时候需要往组件里面插一些内容: //定义一个组件test,插值内容用slog来代替 export default { name: 'test', template:` <d ...

随机推荐

  1. Java 读取PDF中的表格

    一.概述 本文以Java示例展示读取PDF中的表格的方法.这里导入Spire.PDF for Javah中的jar包,并使用其提供的相关及方法来实现获取表格中的文本内容.下表中整理了本次代码使用到的主 ...

  2. ByteCTF2021 double sqli

    double sqli easy sqli http://39.105.175.150:30001/?id=1 http://39.105.116.246:30001/?id=1 http://39. ...

  3. Scrum Meeting 0605

    零.说明 日期:2021-6-5 任务:简要汇报两日内已完成任务,计划后两日完成任务 一.进度情况 组员 负责 两日内已完成的任务 后两日计划完成的任务 困难 qsy PM&前端 暂无 重新设 ...

  4. [对对子队]Scrum Meeting 博客汇总

    对对子队 博客目录 一.Scrum Meeting 1. Alpha Scrum Meeting 1(会议记录4.10) Scrum Meeting 2(会议记录4.11) Scrum Meeting ...

  5. Beta阶段第五次会议

    Beta阶段第五次会议 时间:2020.5.21 完成工作 姓名 工作 难度 完成度 ltx 1.对小程序进行修改和美化新增页面(新增60行) 中 85% xyq 1.编写技术博客 中 85% xtl ...

  6. Flutter应用在夜神模拟器启动白屏问题

    Flutter应用在夜神模拟器启动白屏问题 flutter run  出现如下错误 [ERROR:flutter/shell/gpu/gpu_surface_gl.cc(39)] Failed to ...

  7. Python pip 和pip3区别 联系

    python 有python2和python3的区别 那么pip也有pip和pip3的区别 大概是这样的 pip是python的包管理工具,pip和pip3版本不同,都位于Scripts\目录下: 如 ...

  8. 新手使用python以及pycharm看过来

    前言 随着互联网时代的进步,人类与计算机之前的沟通交流越来越便捷,自此交流的媒介--编程语言吸引力更多的人学习,今天我们就来谈谈当前市面上最火的编程语言 1.文件的概念 什么是文件夹.文件 其实是操作 ...

  9. 使用jax加速Hamming Distance的计算

    技术背景 一般认为Jax是谷歌为了取代TensorFlow而推出的一款全新的端到端可微的框架,但是Jax同时也集成了绝大部分的numpy函数,这就使得我们可以更加简便的从numpy的计算习惯中切换到G ...

  10. 『学了就忘』Linux基础命令 — 27、搜索操作相关命令

    目录 1.whereis命令 2.which命令 3.locate命令 1.whereis命令 whereis是搜索系统命令的命令,也就是说,whereis命令不能搜索普通文件,而只能搜索系统命令. ...