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日历功能对象
Jan 12 Javascript
使用JavaScript动态设置样式实现代码(2)
Jan 25 Javascript
window.onload和$(function(){})的区别介绍
Oct 30 Javascript
js中split函数的使用方法说明
Dec 26 Javascript
jquery遍历select元素(实例讲解)
Dec 31 Javascript
display和visibility的区别示例介绍
Feb 26 Javascript
Jquery实现鼠标移动放大图片功能实例
Mar 25 Javascript
详解JavaScript的回调函数
Nov 20 Javascript
JS实现图片放大缩小的方法
Feb 15 Javascript
浅谈JS 数字和字符串之间相互转化的纠纷
Oct 20 Javascript
Js面试算法详解
Apr 08 Javascript
iview tabs 顶部导航栏和模块切换栏的示例代码
Mar 04 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
php处理文件的小例子(解压缩,删除目录)
2013/02/03 PHP
php采集内容中带有图片地址的远程图片并保存的方法
2015/01/03 PHP
64位windows系统下安装Memcache缓存
2015/12/06 PHP
PHP中的密码加密的解决方案总结
2016/10/26 PHP
PHP判断是否是微信打开还是浏览器打开的方法
2019/02/27 PHP
JavaScript 三种创建对象的方法
2009/10/16 Javascript
Jquery实现显示和隐藏的4种简单方式
2013/08/28 Javascript
js中reverse函数的用法详解
2013/12/26 Javascript
node.js中的fs.chown方法使用说明
2014/12/16 Javascript
js判断一个字符串是否包含一个子串的方法
2015/01/26 Javascript
thinkphp 表名 大小写 窍门
2015/02/01 Javascript
JavaScript 基础函数_深入剖析变量和作用域
2016/05/18 Javascript
js select下拉联动 更具级联性!
2020/04/17 Javascript
node.js(express)中使用Jcrop进行图片剪切上传功能
2017/04/21 Javascript
老生常谈js数据类型
2017/08/03 Javascript
react.js使用webpack搭配环境的入门教程
2017/08/14 Javascript
JavaScript callback回调函数用法实例分析
2018/05/08 Javascript
Vue框架下引入ActiveX控件的问题解决
2019/03/25 Javascript
Pipenv一键搭建python虚拟环境的方法
2018/05/22 Python
python opencv如何实现图片绘制
2020/01/19 Python
对tensorflow中tf.nn.conv1d和layers.conv1d的区别详解
2020/02/11 Python
pycharm实现猜数游戏
2020/12/07 Python
HTML5调用手机摄像头拍照的实现思路及代码
2014/06/15 HTML / CSS
实例教程 利用html5和css3打造一款创意404页面
2014/10/20 HTML / CSS
英国历史最悠久的DJ设备供应商:DJ Finance、DJ Warehouse、The DJ Shop
2019/09/04 全球购物
Linux不知道文件后缀名怎么判断文件类型
2012/04/26 面试题
写好自荐信的几个要点
2013/12/26 职场文书
公司营业员的自我评价
2014/03/04 职场文书
诚信考试承诺书
2014/03/27 职场文书
我的画教学反思
2014/04/28 职场文书
村党支部书记四风问题个人对照检查材料思想汇报
2014/10/06 职场文书
客服专员岗位职责范本
2015/04/07 职场文书
Go 语言下基于Redis分布式锁的实现方式
2021/06/28 Golang
使用Spring处理x-www-form-urlencoded方式
2021/11/02 Java/Android
Python实现灰色关联分析与结果可视化的详细代码
2022/03/25 Python
Oracle锁表解决方法的详细记录
2022/06/05 Oracle