Vue父子组件双向绑定传值的实现方法


Posted in Javascript onJuly 31, 2018

父子组件之间的双向绑定非常简单,但是很多人因为是从Vue 2+开始使用的,可能不知道如何双向绑定,当然最简单的双向绑定(单文件中)就是表单元素的 v-model 了,例如 <input type="text" /> 它会响应表单元素的 value 属性,当输入框文本改变时,会将 value 值传给 v-model 所绑定的变量,如果同时设置 v-model 和 value , value 属性无效。

父子组件的自定义双向 v-model

当若干dom封装成组件时,在父组件中使用子组件时,却无法在子组件标签上使用 v-model ,因为子组件标签不是表单元素,这个时候,我们需要自定义我们想要的 v-model 规则。

<!-- children.vue -->
<template>
 <h1>{{ msg }}</h1>
</template>
<script>

export default{
 model:{
  prop:'msg',//这个字段,是指父组件设置 v-model 时,将变量值传给子组件的 msg
  event:'parent-event'//这个字段,是指父组件监听 parent-event 事件
 },
 props:{
  msg:String //此处必须定义和model的prop相同的props,因为v-model会传值给子组件
 },
 mounted(){
 //这里模拟异步将msg传到父组件v-model,实现双向控制
  setTimeout(_=>{
   let some = '3秒后出现的某个值';//子组件自己的某个值
   this.$emit('praent-event',some);
   //将这个值通过 emit 触发parent-event,将some传递给父组件的v-model绑定的变量
  },3000);
 }
}
</script>

<!-- parent.vue -->
<template>
 <children v-model="parentMsg"></children>
</template>
<script>
import children from 'path/to/children.vue';
export default{
 components:{
  children
 },
 data(){
  return{
   parentMsg:'test'
  }
 },
 watch:{
  parentMsg(newV,oldV){
   console.log(newV,oldV);
   //三秒后控制台会输出
   //'3秒后出现的某个值','test'
  }
 }
}
</script>

你学会组件的自定义 v-model 了吗 ? 如果是普通的表单元素,同理,监听表单的 input 或者 change 事件,实时将 value 或者 checked 通过 $emit 传递就可以了。

父子组件的自定义多个双向值

上述例子,是实现单个prop值的双向绑定,当组件的需求需要复杂的操作,需要多个双向值,是如何实现的呢。这里需要用到以前被vue抛弃,后来又回归的 .sync 修饰符。

事实上,这个比 v-model 更加简单

<!-- children.vue -->
<template>
 <h1>{{ msg }}</h1>
</template>
<script>

export default{
 props:{
  msg:String
 },
 mounted(){
 //这里模拟异步将msg传到父组件v-model,实现双向控制
  setTimeout(_=>{
   let some = '3秒后出现的某个值';//子组件自己的某个值
   this.$emit('update:msg',some);
   //将这个值通过 emit
   //update为固定字段,通过冒号连接双向绑定的msg,将some传递给父组件的v-model绑定的变量
  },3000);
 }
}
</script>

<!-- parent.vue -->
<template>
 <children :msg.sync="parentMsg"></children>
 <!-- 此处只需在平时常用的单向传值上加上.sync修饰符 -->
</template>
<script>
import children from 'path/to/children.vue';
export default{
 components:{
  children
 },
 data(){
  return{
   parentMsg:'test'
  }
 },
 watch:{
  parentMsg(newV,oldV){
   console.log(newV,oldV);
   //三秒后控制台会输出
   //'3秒后出现的某个值','test'
  }
 }
}
</script>

此处需要注意,虽然加上 .sync 即可双向绑定,但是还是要依靠子组件 $emit 去触发 update:prop名 实现修改父组件的变量值实现双向数据流,如果直接对prop的属性直接赋值,依然会出现报错。

事实上, .sync 修饰符是一个简写,它做了一件事情

<template>
 <children :msg.sync="parentMsg"></children>
 <!-- 等价于 -->
 <children :msg="parentMsg" @updata:msg="parentMsg = $event"></children>
 <!-- 这里的$event就是子组件$emit传递的参数 -->
</template>

当需要把一个对象中的属性全部通过 .sync 传入双向数据流时,可以再简便一下写法

<template>
 <children :.sync="obj"></children>
</template>
<script>
export default{
 components:{
  children
 },
 data(){
  return{
   obj:{
    parentMsg:'test'
   }
  }
 }
}
</script>

当使用这种写法时,会将obj对象中的所有属性都通过独立的props传递给子组件,并监听对应的 update: ,此时在子组件中也要声明对应的props。

总结

以上所述是小编给大家介绍的Vue父子组件双向绑定传值的实现方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
学习ExtJS table布局
Oct 08 Javascript
jquery1.5.1中根据元素ID获取元素对象的代码
Apr 02 Javascript
JS 打印功能代码可实现打印预览、打印设置等
Oct 31 Javascript
angularjs表格分页功能详解
Jan 21 Javascript
Js的Array数组对象详解
Feb 22 Javascript
JavaScript中的原型prototype完全解析
May 10 Javascript
JS 组件系列之 bootstrap treegrid 组件封装过程
Apr 28 Javascript
详解从新建vue项目到引入组件Element的方法
Aug 29 Javascript
详解vue-router导航守卫
Jan 19 Javascript
Vue实现固定定位图标滑动隐藏效果
May 30 Javascript
如何在项目中使用log4.js的方法步骤
Jul 16 Javascript
微信小程序实现打开并下载服务器上面的pdf文件到手机
Sep 20 Javascript
react中实现搜索结果中关键词高亮显示
Jul 31 #Javascript
vue2.0页面前进刷新回退不刷新的实现方法
Jul 31 #Javascript
Node.js log4js日志管理详解
Jul 31 #Javascript
jQuery 实现倒计时天,时,分,秒功能
Jul 31 #jQuery
JS实现移动端触屏拖拽功能
Jul 31 #Javascript
JavaScript new对象的四个过程实例浅析
Jul 31 #Javascript
Vue 路由 过渡动效 数据获取方法
Jul 31 #Javascript
You might like
用PHP生成静态HTML速度快类库
2007/03/18 PHP
php后台程序与Javascript的两种交互方式
2009/10/25 PHP
深入PHP FTP类的详解
2013/06/13 PHP
深入PHP许愿墙模块功能分析
2013/06/25 PHP
如何使用GDB调试PHP程序
2015/12/08 PHP
PHP实现补齐关闭的HTML标签
2016/03/22 PHP
默认让页面的第一个控件选中的javascript代码
2009/12/26 Javascript
基于JQuery制作的产品广告效果
2010/12/08 Javascript
javascript中获取class的简单实现
2016/07/12 Javascript
jQuery动态修改字体大小的方法【测试可用】
2016/09/09 Javascript
Bootstrap 3.x打印预览背景色与文字显示异常的解决
2016/11/06 Javascript
js多个物体运动功能实例分析
2016/12/20 Javascript
使用Dropzone.js上传的示例代码
2017/10/10 Javascript
解决vue打包项目后刷新404的问题
2018/03/06 Javascript
jQuery AJAX 方法success()后台传来的4种数据详解
2018/08/08 jQuery
Vue实现简易计算器
2020/02/25 Javascript
在vue中使用Base64转码的案例
2020/08/07 Javascript
[00:37]DOTA2上海特级锦标赛 Secert 战队宣传片
2016/03/03 DOTA
Python计算回文数的方法
2015/03/11 Python
python中for语句简单遍历数据的方法
2015/05/07 Python
python3中int(整型)的使用教程
2017/03/23 Python
Python的IDEL增加清屏功能实例
2017/06/19 Python
python Pygame的具体使用讲解
2017/11/03 Python
浅析Git版本控制器使用
2017/12/10 Python
Python下调用Linux的Shell命令的方法
2018/06/12 Python
python如何实现视频转代码视频
2019/06/17 Python
QT5 Designer 打不开的问题及解决方法
2020/08/20 Python
Mixbook加拿大:照片书,照片卡,剪贴簿,年历和日历
2017/02/21 全球购物
军用级手机壳,专为冒险而建:Zizo Wireless
2019/08/07 全球购物
如何进行Linux分区优化
2013/02/12 面试题
庆祝国庆节演讲稿2014
2014/09/19 职场文书
授权委托书(法人单位用)
2014/09/29 职场文书
优秀教师个人总结
2015/02/11 职场文书
小学数学教师研修日志
2015/11/13 职场文书
车位出租协议书范本
2016/03/19 职场文书
springboot+WebMagic+MyBatis爬虫框架的使用
2021/08/07 Java/Android