vue项目中v-model父子组件通信的实现详解


Posted in Javascript onDecember 10, 2017

前言

我们在vue项目中,经常有这样的需求,父组件绑定v-model,子组件输入更改父组件v-model绑定的数值。很多朋友对这种操作不是很清楚,这需要对v-model有比较深入的了解,今天谈谈v-model。

vue的双向数据绑定

v-model这个指令只能用在<input>, <select>,<textarea>这些表单元素上,所谓双向绑定,指的就是我们在js中的vue实例中的data与其渲染的dom元素上的内容保持一致,两者无论谁被改变,另一方也会相应的更新为相同的数据。

这个问题在很多前端面试中,会提及。面试官问你,vue的双向数据绑定原理是什么?当然,这个也是耳熟能详的问题,百度随便一搜索,到处都能找到答案。

一般都会搜索到,是用Object.defineProperty( ) ,来监听数据get和set,来实现数据劫持的。

假如对Object.defineProperty( )不是很了解,可以点击上面链接,看看其语法!

举个简单的例子:

var blog = {
 name: 'haorooms博客'
};
console.log(blog.name); // haorooms博客

如果想要在执行console.log(blog.name)的同时,直接给haorooms博客加个书名号,那要怎么处理呢?或者说要通过什么监听对象 blog的属性值。这时候Object.defineProperty( )就派上用场了,代码如下:

var blog= {}
var name = '';
Object.defineProperty(blog, 'name', {
 set: function (value) {
 name = value;
 console.log('欢迎来到' + value);
 },
 get: function () {
 return '《' + name + '》'
 }
})
blog.name = 'haorooms博客'; // 欢迎来到haorooms博客
console.log(blog.name); // 《haorooms博客》

上面代码执行一下,可以查看效果!

关于 vue的双向数据绑定,具体如何实现的?网上也有很多实现的代码,这里就不多累赘了!

v-model 的使用

上面开了一个小差,讲了那么多,其实就是为了说明Vue 是单项数据流,v-model 只是语法糖而已。

<input v-model="haorooms" />
<input v-bind:value="haorooms" v-on:input="haorooms= $event.target.value" />

第一行的代码其实只是第二行的语法糖。然后第二行代码还能简写成这样:

<input :value="haorooms" @input="haorooms= $event.target.value" />

也就是说,

<input v-model="haorooms" />

也可以写成

<input :value="haorooms" @input="haorooms= $event.target.value" />

v-model在组件上的使用

回到我们一开始的疑问了?vue中v-model如何进行父子组件的通信?如何在组件中使用呢?假如你理解了我上面的例子,那么,我们就可以很简单的在组件中使用v-model了。

父组件代码如下:

<template>
 <div id="demo">
 <test-model v-model="haorooms"></test-model>
 <span>{{haorooms}}</span>
</div>
</template>
<script>
  import testModel from 'src/components/testModel'
  export default {
   data(){
      return{
         haorooms: "haorooms"
      }
    },
    components: {
      testModel,
    }
  }
</script>
<style lang="scss" scoped>
</style>

子组件代码如下:

<template>
<span>
   <input
    ref="input"
    :value="value"
    @input="$emit('balabala', $event.target.value)"
   >
  </span>
</template>
<script>
  export default {
    data(){
      return{
      }
    },
    props: ["value"],
    model: {
      prop: 'value',
      event: 'balabala'
    }
  }
</script>
<style lang="scss" scoped>
</style>

我们可以通过上面代码,子组件修改父组件v-model绑定的值!

实现截图如下:

vue项目中v-model父子组件通信的实现详解

v-model 的缺点和解决办法

在创建类似复选框或者单选框的常见组件时,v-model就不好用了。

<input type="checkbox" v-model="haorooms" />

我们可以用如下方式解决:

<input type="checkbox" :checked="status" @change="status = $event.target.checked" />

父组件可以如下写:

<my-checkbox v-model="haorooms"></my-checkbox>

子组件:

<input 
        type="checkbox"
        <!--这里就不用 input 了,而是 balabala-->
        @change="$emit('balabala', $event.target.checked)"
        :checked="value"
       />
 export default {
    data(){
      return{
      }
    },
    props: ['checked'], //这里就不用 value 了,而是 checked
   model: {
     prop: 'checked',
     event: 'balabala'
    },
  }

关于vue的v-model就写到这里。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
显示js对象所有属性和方法的函数
Oct 16 Javascript
利用onresize使得div可以随着屏幕大小而自适应的代码
Jan 15 Javascript
js去字符串前后空格5种实现方法及比较
Apr 03 Javascript
javascript检查浏览器是否支持flash的实现代码
Aug 14 Javascript
jQuery 重复加载错误以及修复方法
Dec 16 Javascript
JavaScript动态设置div的样式的方法
Dec 26 Javascript
jQuery基于$.ajax设置移动端click超时处理方法
May 14 Javascript
jQuery实现的右下角广告窗体跟随效果示例
Sep 16 Javascript
详解html-webpack-plugin插件(用法总结)
Sep 12 Javascript
新年快乐! javascript实现超级炫酷的3D烟花特效
Jan 30 Javascript
小程序如何构建骨架屏
May 29 Javascript
three.js 利用uv和ThreeBSP制作一个快递柜功能
Aug 18 Javascript
Angular项目从新建、打包到nginx部署全过程记录
Dec 09 #Javascript
利用ES6实现单例模式及其应用详解
Dec 09 #Javascript
利用node.js如何创建子进程详解
Dec 09 #Javascript
微信小程序使用slider设置数据值及switch开关组件功能【附源码下载】
Dec 09 #Javascript
微信小程序实现action-sheet弹出底部菜单功能【附源码下载】
Dec 09 #Javascript
微信小程序使用toast消息对话框提示用户忘记输入用户名或密码功能【附源码下载】
Dec 09 #Javascript
微信小程序loading组件显示载入动画用法示例【附源码下载】
Dec 09 #Javascript
You might like
自制汽车收音机天线:收听广播的技巧和方法
2021/03/02 无线电
PHP中对缓冲区的控制实现代码
2013/09/29 PHP
学习php中的正则表达式
2014/08/17 PHP
php从csv文件读取数据并输出到网页的方法
2015/03/14 PHP
php使用NumberFormatter格式化货币的方法
2015/03/21 PHP
PHP中把有符号整型转换为无符号整型方法
2015/05/27 PHP
深入探究PHP的多进程编程方法
2015/08/18 PHP
网页中的图片的处理方法与代码
2009/11/26 Javascript
JQuery 插件模板 制作jquery插件的朋友可以参考下
2010/03/17 Javascript
JavaScript中的数据类型转换方法小结
2015/10/26 Javascript
为何JS操作的href都是javascript:void(0);呢
2015/11/12 Javascript
Jquery 整理元素选取、常用方法一览表
2016/11/26 Javascript
JavaScript中利用for循环遍历数组
2017/01/15 Javascript
JavaScript编写一个贪吃蛇游戏
2017/03/09 Javascript
Bootstrap免费字体和图标网站(值得收藏)
2017/03/16 Javascript
详解Vue文档中几个易忽视部分的剖析
2018/03/24 Javascript
Vue.js实现的表格增加删除demo示例
2018/05/22 Javascript
react在安卓中输入框被手机键盘遮挡问题的解决方法
2018/09/03 Javascript
Vue-cli3.X使用px2 rem遇到的问题及解决方法
2019/08/08 Javascript
TypeScript 运行时类型检查补充工具
2020/09/28 Javascript
JavaScript常用进制转换及位运算实例解析
2020/10/14 Javascript
在Python中使用cookielib和urllib2配合PyQuery抓取网页信息
2015/04/25 Python
python jieba分词并统计词频后输出结果到Excel和txt文档方法
2018/02/11 Python
解决PyCharm同目录下导入模块会报错的问题
2018/10/13 Python
Python安装及Pycharm安装使用教程图解
2019/09/20 Python
python GUI库图形界面开发之PyQt5单选按钮控件QRadioButton详细使用方法与实例
2020/02/28 Python
python爬虫可以爬什么
2020/06/16 Python
python中Pexpect的工作流程实例讲解
2021/03/02 Python
HTML5之WebGL 3D概述(上)—WebGL原生开发开启网页3D渲染新时代
2013/01/31 HTML / CSS
五个2015 年最佳HTML5 框架
2015/11/11 HTML / CSS
英国轻奢珠宝品牌:Astley Clarke
2016/12/18 全球购物
The Body Shop美体小铺西班牙官网:天然化妆品
2019/06/21 全球购物
如何将字串String转换成整数int
2015/02/21 面试题
运动会广播稿300字
2014/01/10 职场文书
上海世博会志愿者口号
2014/06/17 职场文书
mysql连接查询中and与where的区别浅析
2021/07/01 MySQL