Vue使用.sync 实现父子组件的双向绑定数据问题


Posted in Javascript onApril 04, 2019

1.前言

最近在vue 项目中有一个需求, 就是我需要根据不同的类型在页面中放不同的组件, 组件需要跟当前页面的数据进行双向绑定,如果都写在同一个页面 代码会显得比较多,毕竟我当前页面已经7-800行代码了 所以我需要把一些元素定义成组件 ,封装起来,所以就会遇到 数据的传值绑定问题

2.父组件

首先我们来看看官方文档 [ https://cn.vuejs.org/v2/guide/components.html#sync-修饰符 ]

.sync 修饰符所提供的功能。当一个子组件改变了一个 prop 的值时,这个变化也会同步到父组件中所绑定

就是说我们可以直接在我们需要传的prop后面加上 .sync

比如 我下面需要绑定   p_model,然后我在他后面加上.sync

<certificate-input
    :p_model.sync='pname'>
 </certificate-input>

他会扩展成:

<certificate-input :p_model="pname" @update:p_model="val => pname= val"></certificate-input>

父组件全部代码:

<template>
 <div>
 <certificate-input
    :p_model.sync='pname'
    :xi_model.sync="xiname">
 </certificate-input>
</div>
</template>
import CertificateInput from '../common/CertificateInput.vue'
export default {
 name: 'fathor',
 components: {
  CertificateInput 
 },
 data() {
  return {
   pname:"",
   xiname:""
 }  
}

子组件

上面说了一大推父组件下面我们来看看子组件怎么写 ?

因为我项目中使用vux 代码就直接复制过来改了一下

<template>
 <div>
  <x-input
   title="姓名" 
   v-model="name" 
   ></x-input>
  <x-input title="身份证号" 
    v-model="idCard" 
    placeholder="请输入身份证号"
    required>
  </x-input>
 </div>
</template>
<script type="text/javascript">
 import { XInput} from 'vux'
 export default{
  name:'certificateInput',
  props:["p_model","xi_model"],
  components:{
   XInput
  },
  data(){
   return{
    name:this.p_model,
    idCard:this.xi_model
   }
  },
  watch:{
  
   p_model(val) { 
    this.address = val;
   },
   name(val){
  //设置监听,如果改变就更新 p_model
    this.$emit('update:p_model', val)
   },
   xi_model(val){
    this.certificate = val
   },
   idCard(val){
     this.$emit('update:xi_model', val)
   }
  }
 }
</script>

由上面可以看出   子组件主要代码 就是监听他的改变 然后触发父组件监听的事件

name(val){
  //设置监听,如果改变就更新 p_model
    this.$emit('update:p_model', val)
}

好了 上面就是我的方法

感觉写的好low

以后多多改善

总结

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

Javascript 相关文章推荐
二级域名或跨域共享Cookies的实现方法
Aug 07 Javascript
js为鼠标添加右击事件防止默认的右击菜单弹出
Jul 29 Javascript
jQuery事件绑定和委托实例
Nov 25 Javascript
jQuery中live()方法用法实例
Jan 19 Javascript
基于javascript实现数字英文验证码
Jan 25 Javascript
浅谈js-FCC算法Friendly Date Ranges(详解)
Apr 10 Javascript
bootstrap模态框示例代码分享
May 17 Javascript
jquery登录的异步验证操作示例
May 09 jQuery
Angular value与ngValue区别详解
Nov 27 Javascript
微信小程序自定义弹出层效果
May 26 Javascript
JavaScript实现像雪花一样的Hexaflake分形
Jul 07 Javascript
用javascript实现倒计时效果
Feb 09 Javascript
小程序getLocation需要在app.json中声明permission字段
Apr 04 #Javascript
Vue组件内部实现一个双向数据绑定的实例代码
Apr 04 #Javascript
详解JavaScript的变量
Apr 04 #Javascript
vue elementUI table表格数据 滚动懒加载的实现方法
Apr 04 #Javascript
js 计算图片内点个数的示例代码
Apr 04 #Javascript
在node中使用jwt签发与验证token的方法
Apr 03 #Javascript
全面了解JavaScript的作用域链
Apr 03 #Javascript
You might like
让这部DC动画新作刷新你的认知
2020/03/03 欧美动漫
第六节 访问属性和方法 [6]
2006/10/09 PHP
Google Voice 短信发送接口PHP开源版(2010.5更新)
2010/07/22 PHP
深入Memcache的Session数据的多服务器共享详解
2013/06/13 PHP
smarty中英文多编码字符截取乱码问题解决方法
2014/10/28 PHP
PHP如何防止用户重复提交表单
2020/12/09 PHP
解析js如何获取当前url中的参数值并复制给input
2013/06/23 Javascript
浅析JQuery获取和设置Select选项的常用方法总结
2013/07/04 Javascript
js操作模态窗口及父子窗口间相互传值示例
2014/06/09 Javascript
JavaScript的作用域和块级作用域概念理解
2014/09/21 Javascript
Json实现异步请求提交评论无需跳转其他页面
2014/10/11 Javascript
jQuery中html()方法用法实例
2014/12/25 Javascript
再谈javascript常见错误及解决方法
2016/09/16 Javascript
详解Node.js串行化流程控制
2017/05/04 Javascript
vue开发中遇到的问题总结
2020/04/07 Javascript
Python创建文件和追加文件内容实例
2014/10/21 Python
在Python中实现贪婪排名算法的教程
2015/04/17 Python
Python3.6连接Oracle数据库的方法详解
2018/05/18 Python
python实现输入数字的连续加减方法
2018/06/22 Python
正确理解Python中if __name__ == '__main__'
2019/01/24 Python
Python3 修改默认环境的方法
2019/02/16 Python
css3实现文字扫光渐变动画效果的示例
2017/11/07 HTML / CSS
Sperry官网:帆船鞋创始品牌
2016/09/07 全球购物
森海塞尔美国官网:Sennheiser耳机与耳麦
2017/07/19 全球购物
阿玛尼美妆俄罗斯官网:Giorgio Armani Beauty RU
2020/07/19 全球购物
通息工程毕业生自荐信
2013/10/16 职场文书
暑期实践思想汇报
2014/01/06 职场文书
母亲节演讲稿
2014/05/27 职场文书
会计学专业求职信
2014/07/17 职场文书
报表员工作失误检讨书范文
2014/09/19 职场文书
城管个人总结
2015/02/28 职场文书
2015年监理工作总结范文
2015/04/07 职场文书
大学开学感言
2015/08/01 职场文书
敬老院活动感想
2015/08/07 职场文书
js前端面试常见浏览器缓存强缓存及协商缓存实例
2022/06/21 Javascript
Python如何加载模型并查看网络
2022/07/15 Python