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 相关文章推荐
javascript中获取选中对象的类型
Apr 02 Javascript
js控制CSS样式属性语法对照表
Dec 11 Javascript
编写js扩展方法判断一个数组中是否包含某个元素
Nov 08 Javascript
JQuery记住用户名密码实现下次自动登录功能
Apr 27 Javascript
JS模式之简单的订阅者和发布者模式完整实例
Jun 30 Javascript
Vue.js组件tabs实现选项卡切换效果
Dec 01 Javascript
原生js实现弹出层效果
Jan 20 Javascript
angular.js指令中transclude选项及ng-transclude指令详解
May 24 Javascript
zTree树形插件异步加载方法详解
Jun 14 Javascript
jQuery实现checkbox的简单操作
Nov 18 jQuery
说说如何利用 Node.js 代理解决跨域问题
Apr 22 Javascript
wepy--用vantUI 实现上弹列表并选择相应的值操作
Nov 03 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
很温暖很温暖的Lester Young
2021/03/03 冲泡冲煮
最省空间的计数器
2006/10/09 PHP
利用php实现禁用IE和火狐的缓存问题
2012/12/03 PHP
解析PHP缓存函数的使用说明
2013/05/10 PHP
PHP登陆后跳转到登陆前页面实现思路及代码
2014/01/17 PHP
PHP实现获取图片颜色值的方法
2014/07/11 PHP
PHP根据图片色界在不同位置加水印的方法
2015/07/01 PHP
jquery 选项卡效果 新手代码
2011/07/08 Javascript
jQuery学习笔记(3)--用jquery(插件)实现多选项卡功能
2013/04/08 Javascript
jQuery图片的展开和收缩实现代码
2013/04/16 Javascript
原生JS实现加入收藏夹的代码
2013/10/24 Javascript
javascript实现数字+字母验证码的简单实例
2014/02/10 Javascript
鼠标滑过出现预览的大图提示效果
2014/02/26 Javascript
基于jQuery插件实现点击小图显示大图效果
2016/05/11 Javascript
javascript RegExp 使用说明
2016/05/21 Javascript
javascript cookie用法基础教程(概念,设置,读取及删除)
2016/09/20 Javascript
微信小程序 122100版本更新问题解决方案
2016/12/22 Javascript
Vue CLI3 如何支持less的方法示例
2018/08/29 Javascript
在Vue中获取组件声明时的name属性方法
2018/09/12 Javascript
Vue实现动态添加或者删除对象和对象数组的操作方法
2018/09/21 Javascript
解决Python传递中文参数的问题
2015/08/04 Python
MySQL中表的复制以及大型数据表的备份教程
2015/11/25 Python
Python内置模块logging用法实例分析
2018/02/12 Python
python pandas消除空值和空格以及 Nan数据替换方法
2018/10/30 Python
python禁用键鼠与提权代码实例
2019/08/16 Python
python打包成so文件过程解析
2019/09/28 Python
PyCharm 无法 import pandas 程序卡住的解决方式
2020/03/09 Python
程序集与命名空间有什么不同
2014/07/25 面试题
大学毕业感言100字
2014/02/03 职场文书
小学生综合素质评语
2014/04/23 职场文书
志愿者活动总结报告
2014/06/27 职场文书
村创先争优活动总结
2014/08/28 职场文书
出生医学证明书
2014/09/15 职场文书
员工聘用合同范本
2015/09/21 职场文书
当你找不到方向的时候,不妨读读刘备的一生
2019/08/05 职场文书
vue项目如何打包之项目打包优化(让打包的js文件变小)
2022/04/30 Vue.js