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 相关文章推荐
理解Javascript_03_javascript全局观
Oct 11 Javascript
JavaScript中__proto__与prototype的关系深入理解
Dec 04 Javascript
jQuery函数的等价原生函数代码示例
May 27 Javascript
关于JS中的闭包浅谈
Aug 23 Javascript
jQuery获取DOM节点实例分析(2种方式)
Dec 15 Javascript
javascript冒泡排序小结
Apr 10 Javascript
gulp教程_从入门到项目中快速上手使用方法
Sep 14 Javascript
jQuery选择器之属性过滤选择器详解
Sep 28 jQuery
webpack4.x开发环境配置详解
Aug 04 Javascript
vue draggable resizable 实现可拖拽缩放的组件功能
Jul 15 Javascript
JS事件流与事件处理程序实例分析
Aug 16 Javascript
微信小程序之高德地图多点路线规划过程示例详解
Jan 18 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
使用PHPMailer发送邮件实例
2017/02/15 PHP
Javascript中查找不以XX字符结尾的单词示例代码
2013/10/15 Javascript
js倒计时小程序
2013/11/05 Javascript
nodejs教程之环境安装及运行
2014/11/21 NodeJs
Bootstrap每天必学之滚动监听
2016/03/16 Javascript
js多功能分页组件layPage使用方法详解
2016/05/19 Javascript
Bootstrap缩略图的创建方法
2017/03/22 Javascript
JavaScript装饰器函数(Decorator)实例详解
2017/03/30 Javascript
Angular 4.X开发实践中的踩坑小结
2017/07/04 Javascript
jQuery实现动态给table赋值的方法示例
2017/07/04 jQuery
详解基于Angular4+ server render(服务端渲染)开发教程
2017/08/28 Javascript
纯js实现画一棵树的示例
2017/09/05 Javascript
Angular2.0/4.0 使用Echarts图表的示例代码
2017/12/07 Javascript
JavaScript中toLocaleString()和toString()的区别实例分析
2018/08/14 Javascript
Vue中使用 setTimeout() setInterval()函数的问题
2018/09/13 Javascript
vue实现同一个页面可以有多个router-view的方法
2018/09/20 Javascript
如何利用JavaScript编写一个格斗小游戏
2021/01/06 Javascript
vue中axios封装使用的完整教程
2021/03/03 Vue.js
python使用urllib2模块获取gravatar头像实例
2013/12/18 Python
python select.select模块通信全过程解析
2017/09/20 Python
python将字典内容存入mysql实例代码
2018/01/18 Python
Python实现识别手写数字 简易图片存储管理系统
2018/01/29 Python
PyQt5实现简单数据标注工具
2019/03/18 Python
关于pandas的离散化,面元划分详解
2019/11/22 Python
django框架基于queryset和双下划线的跨表查询操作详解
2019/12/11 Python
浅析Python 简单工厂模式和工厂方法模式的优缺点
2020/07/13 Python
Python使用for生成列表实现过程解析
2020/09/22 Python
解决python3输入的坑——input()
2020/12/05 Python
哈萨克斯坦移动和数字技术在线商店:SatelOnline.kz
2020/09/04 全球购物
《九色鹿》教学反思
2014/02/27 职场文书
人力资源部经理助理岗位职责
2014/03/04 职场文书
个人租房协议书
2014/04/09 职场文书
好书伴我成长演讲稿
2014/05/14 职场文书
tensorflow学习笔记之tfrecord文件的生成与读取
2021/03/31 Python
使用canvas仿Echarts实现金字塔图的实例代码
2021/11/11 HTML / CSS
django 认证类配置实现
2021/11/11 Python