vue.js自定义组件实现v-model双向数据绑定的示例代码


Posted in Javascript onJanuary 08, 2020

我们都清楚v-model其实就是vue的一个语法糖,用于在表单控件或者组件上创建双向绑定。

//表单控件上使用v-model
<template>
 <input type="text" v-model="name" />
 <input type="checkbox" v-model="checked"/>
 <!--上面的input和下面的input实现的效果是一样的-->
 <input type="text" :value="name" @input="name=e.target.vlaue"/>
 <input type="checkBox" :checked="checked" @click=e.target.checked/>
 {{name}}
</template>
<script>
export default{
 data(){
  return {
   name:"",
   checked:false,
  }
 }
}
</script>

vue中父子组件的props通信都是单向的。父组件通过props向下传值给子组件,子组件通过$emit触发父组件中的方法。所以自定义组件是无法直接使用v-model来实现v-model双向绑定的。那么有什么办法可以实现呢?

//父组件
<template>
 <div>
  <c-input v-model="form.name"></c-input>
  <c-input v-model="form.password"></c-input>
  <!--上面的input等价于下面的input-->
 <!--<c-input :value="form.name" @input="form.name=e.target.value"/>
  <c-input :value="form.password" @input="form.password=e.target.value"/>-->
 </div>
</template>
<script>
import cInput from "./components/Input"
export default {
 components:{
  cInput
 },
 data() {
  return {
   form:{
    name:"",
    password:""
   },
   
  }
 },
}
</script>
//子组件 cInput
<template>
  <input type="text" :value="inputValue" @input="handleInput">
</template>
<script>
export default {
 props:{
  value:{
   type:String,
   default:"",
   required:true,
  }
 },
 data() {
  return {
   inputValue:this.value,
  }
 },
 methods:{
  handleInput(e){
   const value=e.target.value;
   this.inputValue=value;
   this.$emit("input",value);
  },
 }
}
</script>

根据上面的示例代码可以看出,子组件c-input上绑定了父组件form的值,在子组件中通过:value接收了这个值,然后我们在子组件中修改了这个值,并且通过$emit触发了父组件中的input事件将修改的值又赋值给了form。

综上就实现了自定义组件中的双向数据绑定!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用倒置滤镜把div倒置,再把table倒置。
Jul 31 Javascript
document.onreadystatechange事件的用法分析
Oct 17 Javascript
jquery1.4后 jqDrag 拖动 不可用
Feb 06 Javascript
jquery blockUI 遮罩不能消失与不能提交的解决方法
Sep 17 Javascript
jQuery中创建实例与原型继承揭秘
Dec 21 Javascript
js使浏览器窗口最大化实现代码(适用于IE)
Aug 07 Javascript
jQuery图片切换动画效果
Feb 28 Javascript
面试常见的js算法题
Mar 23 Javascript
微信小程序实现倒计时60s获取验证码
Apr 17 Javascript
JS使用正则表达式找出最长连续子串长度
Oct 26 Javascript
页面内锚点定位及跳转方法总结(推荐)
Apr 24 Javascript
JS实现公告上线滚动效果
Jan 10 Javascript
微信小程序实现吸顶效果
Jan 08 #Javascript
JS实现吸顶特效
Jan 08 #Javascript
vue项目中在可编辑div光标位置插入内容的实现代码
Jan 07 #Javascript
electron+vue实现div contenteditable截图功能
Jan 07 #Javascript
解决vue elementUI中table里数字、字母、中文混合排序问题
Jan 07 #Javascript
Vue程序化的事件监听器(实例方案详解)
Jan 07 #Javascript
微信小程序服务器日期格式化问题
Jan 07 #Javascript
You might like
基于php下载文件的详解
2013/06/02 PHP
自适应图片大小的弹出窗口
2006/07/27 Javascript
Array, Array Constructor, for in loop, typeof, instanceOf
2011/09/13 Javascript
jquery中的查找parents与closest方法之间的区别
2013/12/02 Javascript
jQuery函数的第二个参数获取指定上下文中的DOM元素
2014/05/19 Javascript
jquery实现导航固定顶部的效果仿蘑菇街
2014/10/22 Javascript
js中substr,substring,indexOf,lastIndexOf,split,replace的用法详解
2015/11/09 Javascript
第三章之Bootstrap 表格与按钮功能
2016/04/25 Javascript
JavaScript必知必会(六) delete in instanceof
2016/06/08 Javascript
详细探究ES6之Proxy代理
2016/07/22 Javascript
微信小程序 form组件详解
2016/10/25 Javascript
Nodejs下DNS缓存问题浅析
2016/11/16 NodeJs
html5+canvas实现支持触屏的签名插件教程
2017/05/08 Javascript
vue.js中v-on:textInput无法执行事件问题的解决过程
2017/07/12 Javascript
Vue from-validate 表单验证的示例代码
2017/09/26 Javascript
javascript按钮禁用和启用的效果实例代码
2017/10/29 Javascript
详解webpack require.ensure与require AMD的区别
2017/12/13 Javascript
vue组件传递对象中实现单向绑定的示例
2018/02/28 Javascript
vue将时间戳转换成自定义时间格式的方法
2018/03/02 Javascript
微信小程序 如何保持登录状态
2019/08/16 Javascript
python flask实现分页效果
2017/06/27 Python
处理python中多线程与多进程中的数据共享问题
2019/07/28 Python
Python使用matplotlib绘制Logistic曲线操作示例
2019/11/28 Python
CSS3实现线性渐变用法示例代码详解
2020/08/07 HTML / CSS
html5借用repeating-linear-gradient实现一把刻度尺(ruler)
2019/09/09 HTML / CSS
打架检讨书300字
2014/02/02 职场文书
会议主持词
2014/03/17 职场文书
班级学习雷锋活动总结
2014/07/04 职场文书
股东授权委托书范文
2014/09/13 职场文书
技术员岗位职责范本
2015/04/11 职场文书
2015社区爱国卫生工作总结
2015/04/21 职场文书
城南旧事电影观后感
2015/06/16 职场文书
西游记读书笔记
2015/06/25 职场文书
2019森林防火宣传标语大全!
2019/07/03 职场文书
golang生成vcf通讯录格式文件详情
2022/03/25 Golang
Mac电脑OS系统下安装Nginx的详细教程
2022/04/14 Servers