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 相关文章推荐
jquery动画2.元素坐标动画效果(创建一个图片走廊)
Aug 24 Javascript
Js日期选择自动填充到输入框(界面漂亮兼容火狐)
Aug 02 Javascript
Bootstrap学习笔记之css样式设计(2)
Jun 07 Javascript
深入理解JS中的Function.prototype.bind()方法
Oct 11 Javascript
jQuery实现ajax回调函数带入参数的方法示例
Jun 26 jQuery
vue axios 简单封装以及思考
Oct 09 Javascript
了解javascript中的Dom操作
May 27 Javascript
node.js制作一个简单的登录拦截器
Feb 10 Javascript
ElementUI中el-tree节点的操作的实现
Feb 27 Javascript
vue移动端的左右滑动事件详解
Jun 17 Javascript
如何用JS模拟实现数组的map方法
Jul 30 Javascript
Javascript节流函数throttle和防抖函数debounce
Dec 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
全国FM电台频率大全 - 27 陕西省
2020/03/11 无线电
索尼SONY SRF-S83/84电路分析和打磨
2021/03/02 无线电
不懂JavaScript应该怎样学
2008/04/16 Javascript
在IE,Firefox,Safari,Chrome,Opera浏览器上调试javascript
2008/12/02 Javascript
JAVASCRIPT实现的WEB页面跳转以及页面间传值方法
2010/05/13 Javascript
jQuery选择器中含有空格的使用示例及注意事项
2013/08/25 Javascript
javascript删除数组元素并且数组长度减小的简单实例
2014/02/14 Javascript
JS获取select的value和text值的简单实例
2014/02/26 Javascript
jquery实现焦点图片随机切换效果的方法
2015/03/12 Javascript
Bootstrap精简教程
2015/11/27 Javascript
javascript实现数组去重的多种方法
2016/03/14 Javascript
confirm确认对话框的实现方法总结
2016/06/17 Javascript
详解springmvc 接收json对象的两种方式
2016/12/06 Javascript
BootStrap表单控件之复选框checkbox和单选择按钮radio
2017/05/23 Javascript
详解Node.js中path模块的resolve()和join()方法的区别
2018/10/29 Javascript
JavaScript设计模式之观察者模式实例详解
2019/01/16 Javascript
Vue.js + Nuxt.js 项目中使用 Vee-validate 表单校验
2019/04/22 Javascript
微信小程序实现通讯录列表展开收起
2020/11/18 Javascript
[58:32]EG vs Liquid 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python类定义和类继承详解
2015/05/08 Python
Windows上使用virtualenv搭建Python+Flask开发环境
2016/06/07 Python
python 利用turtle模块画出没有角的方格
2019/11/23 Python
Django返回HTML文件的实现方法
2020/09/17 Python
圣彼得堡鲜花配送:Semicvetic
2020/09/15 全球购物
struct和class的区别
2015/11/20 面试题
计算机专业推荐信范文
2013/11/20 职场文书
精神文明建设先进工作者事迹材料
2014/05/02 职场文书
教室布置标语
2014/06/26 职场文书
2014年党的群众路线教育实践活动整改措施(个人版)
2014/09/25 职场文书
班子四风对照检查材料思想汇报
2014/09/29 职场文书
开幕式邀请函
2015/01/31 职场文书
护士实习自荐信
2015/03/06 职场文书
放假通知格式
2015/04/14 职场文书
2016国培学习心得体会
2016/01/08 职场文书
Python机器学习应用之基于线性判别模型的分类篇详解
2022/01/18 Python
海弦WR-800F
2022/04/05 无线电