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处理表单示例(javascript提交表单)
Apr 28 Javascript
js鼠标悬浮出现遮罩层的方法
Jan 28 Javascript
简介JavaScript中substring()方法的使用
Jun 06 Javascript
js简单判断移动端系统的方法
Feb 25 Javascript
javascript判断图片是否加载完成的方法推荐
May 13 Javascript
BootStrap中按钮点击后被禁用按钮的最佳实现方法
Sep 23 Javascript
jQuery双向列表选择器DIV模拟版
Nov 01 Javascript
详解node服务器中打开html文件的两种方法
Sep 18 Javascript
jQuery实现的下雪动画效果示例【附源码下载】
Feb 02 jQuery
JavaScript 装逼指南(js另类写法)
May 10 Javascript
解决antd 下拉框 input [defaultValue] 的值的问题
Oct 31 Javascript
微信小程序实现拍照和相册选取图片
May 09 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
Android ProgressBar进度条和ProgressDialog进度框的展示DEMO
2013/06/19 PHP
关于ob_get_contents(),ob_end_clean(),ob_start(),的具体用法详解
2013/06/24 PHP
php源码分析之DZX1.5字符串截断函数cutstr用法
2015/06/17 PHP
浅谈PHP实现大流量下抢购方案
2017/12/15 PHP
laravel 实现根据字段不同值做不同查询
2019/10/23 PHP
JS的数组的扩展实例代码
2008/07/09 Javascript
跨浏览器通用、可重用的选项卡tab切换js代码
2011/09/20 Javascript
js事件冒泡实例分享(已测试)
2013/04/23 Javascript
你必须知道的JavaScript 中字符串连接的性能的一些问题
2013/05/07 Javascript
关闭ie窗口清除Session的解决方法
2014/01/10 Javascript
js二维数组排序的简单示例代码
2014/01/24 Javascript
node.js中使用node-schedule实现定时任务实例
2014/06/03 Javascript
jQuery超简单选项卡完整实例
2015/09/26 Javascript
轻松学习jQuery插件EasyUI EasyUI表单验证
2015/12/01 Javascript
jQuery实现页面顶部显示的进度条效果完整实例
2015/12/09 Javascript
JS实现对中文字符串进行utf-8的Base64编码的方法(使其与Java编码相同)
2016/06/21 Javascript
jQuery双向列表选择器DIV模拟版
2016/11/01 Javascript
javascript 实现文本使用省略号替代(超出固定高度的情况)
2017/02/21 Javascript
vue+element-ui动态生成多级表头的方法
2018/08/28 Javascript
vuejs实现折叠面板展开收缩动画效果
2018/09/06 Javascript
微信小程序里引入SVG矢量图标的方法
2019/09/20 Javascript
解决ant design vue中树形控件defaultExpandAll设置无效的问题
2020/10/26 Javascript
python将ip地址转换成整数的方法
2015/03/17 Python
Python实现的数据结构与算法之基本搜索详解
2015/04/22 Python
python3正则提取字符串里的中文实例
2019/01/31 Python
python数据类型之间怎么转换技巧分享
2019/08/20 Python
详解pyinstaller生成exe的闪退问题解决方案
2020/06/19 Python
python 调整图片亮度的示例
2020/12/03 Python
5分钟实现Canvas鼠标跟随动画背景
2019/11/18 HTML / CSS
Under Armour安德玛荷兰官网:美国高端运动科技品牌
2019/07/10 全球购物
巴西Bo.Bô官方在线商店:经营奢侈品时尚业务
2020/03/16 全球购物
Super-Pharm波兰:药房和香水在一个地方
2020/08/18 全球购物
史上最牛的辞职信
2015/02/28 职场文书
寻衅滋事罪辩护词
2015/05/21 职场文书
MySQL窗口函数的具体使用
2021/11/17 MySQL
httpclient调用远程接口的方法
2022/08/14 Java/Android