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 相关文章推荐
jQuery AnythingSlider滑动效果插件
Feb 07 Javascript
jQuery学习笔记(1)--用jQuery实现异步通信(用json传值)具体思路
Apr 08 Javascript
一个检测表单数据的JavaScript实例
Oct 31 Javascript
Web表单提交之disabled问题js解决方法
Jan 13 Javascript
JavaScript实现非常简单实用的下拉菜单效果
Aug 27 Javascript
基于JS实现移动端访问PC端页面时跳转到对应的移动端网页
Dec 24 Javascript
静态页面实现 include 引入公用代码的示例
Sep 25 Javascript
基于vue2.0实现简单轮播图
Nov 27 Javascript
浅谈vue引用静态资源需要注意的事项
Sep 28 Javascript
原生js实现获取form表单数据代码实例
Mar 27 Javascript
webpack中如何加载静态文件的方法步骤
May 18 Javascript
如何使JavaScript休眠或等待
Apr 27 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
用PHP实现小写金额转换大写金额的代码(精确到分)
2012/01/10 PHP
CodeIgniter框架数据库事务处理的设计缺陷和解决方案
2014/07/25 PHP
PHP strtotime函数用法、实现原理和源码分析
2015/02/04 PHP
php多进程并发编程防止出现僵尸进程的方法分析
2020/02/28 PHP
jcarousellite.js 基于Jquery的图片无缝滚动插件
2010/12/30 Javascript
各浏览器对link标签onload/onreadystatechange事件支持的差异分析
2011/04/27 Javascript
举例讲解JavaScript中关于对象操作的相关知识
2015/11/16 Javascript
JavaScript中的原始值和复杂值
2016/01/07 Javascript
JS简单实现仿百度控制台输出信息效果
2016/09/04 Javascript
简单易懂的天气插件(代码分享)
2017/02/04 Javascript
基于jQuery和CSS3实现APPLE TV海报视差效果
2017/06/16 jQuery
vue2.0实现前端星星评分功能组件实例代码
2018/02/12 Javascript
vue axios基于常见业务场景的二次封装的实现
2018/09/21 Javascript
vue调用语音播放的方法
2019/09/27 Javascript
JS求解两数之和算法详解
2020/04/28 Javascript
[02:42]DOTA2英雄基础教程 杰奇洛
2013/12/23 DOTA
python 输出一个两行字符的变量
2009/02/05 Python
python 递归遍历文件夹,并打印满足条件的文件路径实例
2017/08/30 Python
Python Flask-web表单使用详解
2017/11/18 Python
Python实现可获取网易页面所有文本信息的网易网络爬虫功能示例
2018/01/15 Python
python实现自动发送报警监控邮件
2018/06/21 Python
python实现简单的文字识别
2018/11/27 Python
正确理解Python中if __name__ == '__main__'
2019/01/24 Python
Python3实现统计单词表中每个字母出现频率的方法示例
2019/01/28 Python
Python操作注册表详细步骤介绍
2020/02/05 Python
澳大利亚快时尚鞋类市场:Billini
2018/05/20 全球购物
OnePlus加拿大官网:中国国际化手机品牌
2020/10/13 全球购物
数据库专业英语
2012/11/30 面试题
致跳远运动员加油稿
2014/02/11 职场文书
舞蹈专业求职信
2014/06/13 职场文书
会计试用期自我评价怎么写
2014/09/18 职场文书
群众路线领导班子整改方案
2014/10/25 职场文书
2015商场元旦促销活动策划方案
2014/12/09 职场文书
SpringBoot 集成Redis 过程
2021/06/02 Redis
Python基础之条件语句详解
2021/06/16 Python
关于MySQL中的 like操作符详情
2021/11/17 MySQL