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 相关文章推荐
jquery()函数的三种语法介绍
Oct 09 Javascript
jQuery实现的多级下拉菜单效果代码
Aug 24 Javascript
为jQuery-easyui的tab组件添加右键菜单功能的简单实例
Oct 10 Javascript
jQuery实现锚点向下平滑滚动特效示例
Aug 29 jQuery
Validform验证时可以为空否则按照指定格式验证
Oct 20 Javascript
vuex与组件联合使用的方法
May 10 Javascript
express express-session的使用小结
Dec 12 Javascript
移动端自适应flexible.js的使用方法(不用三大框架,仅写一个单html页面使用)推荐
Apr 02 Javascript
javascript的惯性运动实现代码实例
Sep 07 Javascript
vue实现拖拽效果
Dec 23 Javascript
使用vue-cli3+typescript的项目模板创建工程的教程
Feb 28 Javascript
vue动态设置路由权限的主要思路
Jan 13 Vue.js
微信小程序实现吸顶效果
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
2019年中国咖啡业现状与发展趋势
2021/03/04 咖啡文化
抓取并下载CSS中所有图片文件的php代码
2011/09/26 PHP
php5.4以下版本json不支持不转义内容中文的解决方法
2015/01/13 PHP
smarty模板引擎使用内建函数foreach循环取出所有数组值的方法
2015/01/22 PHP
php获取从百度、谷歌等搜索引擎进入网站关键词的方法
2015/07/08 PHP
php array_values 返回数组的所有值详解及实例
2016/11/12 PHP
PHP+Mysql无刷新问答评论系统(源码)
2016/12/20 PHP
PHP+Mysql+Ajax实现淘宝客服或阿里旺旺聊天功能(前台页面)
2017/06/16 PHP
javascript Array.prototype.slice使用说明
2010/10/11 Javascript
window.location 对象所包含的属性
2014/10/10 Javascript
详解堆的javascript实现方法
2016/11/29 Javascript
用Vue-cli搭建的项目中引入css报错的原因分析
2017/07/20 Javascript
vue实现全选和反选功能
2017/08/31 Javascript
p5.js绘制旋转的正方形
2019/10/23 Javascript
浅谈如何优雅处理JavaScript异步错误
2019/11/12 Javascript
js中实现继承的五种方法
2021/01/25 Javascript
Python日期操作学习笔记
2008/10/07 Python
python获取网页状态码示例
2014/03/30 Python
在python下读取并展示raw格式的图片实例
2019/01/24 Python
pandas去重复行并分类汇总的实现方法
2019/01/29 Python
python实践项目之监控当前联网状态详情
2019/05/23 Python
对pyqt5多线程正确的开启姿势详解
2019/06/14 Python
详解Django模版中加载静态文件配置方法
2019/07/21 Python
django模板获取list中指定索引的值方式
2020/05/14 Python
Python requests上传文件实现步骤
2020/09/15 Python
使用python对excel表格处理的一些小功能
2021/01/25 Python
Python Process创建进程的2种方法详解
2021/01/25 Python
详解CSS3弹性伸缩盒
2020/09/21 HTML / CSS
香港优质食材和美酒专门店:FoodWise
2017/09/01 全球购物
周年庆典邀请函范文
2014/01/24 职场文书
咖啡店创业计划书范文
2014/09/15 职场文书
2015年高中语文教学总结
2015/08/18 职场文书
MySQL 8.0 之不可见列的基本操作
2021/05/20 MySQL
ES6 解构赋值的原理及运用
2021/05/25 Javascript
quickjs 封装 JavaScript 沙箱详情
2021/11/02 Javascript
基于Python编写简易版的天天跑酷游戏的示例代码
2022/03/23 Python