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 相关文章推荐
JScript中的undefined和&quot;undefined&quot;的区别
Mar 08 Javascript
script标签的 charset 属性使用说明
Dec 04 Javascript
javascript插入样式实现代码
Feb 22 Javascript
JavaScript与DOM组合动态创建表格实例
Dec 23 Javascript
当鼠标移动时出现特效的JQuery代码
Nov 08 Javascript
javascript获取URL参数与参数值的示例代码
Dec 20 Javascript
bootstrap confirmation按钮提示组件使用详解
Aug 22 Javascript
详解AngularJS1.x学习directive 中‘&amp; ’‘=’ ‘@’符号的区别使用
Aug 23 Javascript
解决html-jquery/js引用外部图片时遇到看不了或出现403的问题
Sep 22 jQuery
详解Angular路由之路由守卫
May 10 Javascript
jQuery实现的自定义轮播图功能详解
Dec 28 jQuery
vue中利用iscroll.js解决pc端滚动问题
Feb 15 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
yii权限控制的方法(三种方法)
2015/12/28 PHP
JavaScript CSS修改学习第一章 查找位置
2010/02/19 Javascript
JavaScript基本编码模式小结
2012/05/23 Javascript
js报$ is not a function 的问题的解决方法
2014/01/20 Javascript
jQuery学习笔记之jQuery.extend(),jQuery.fn.extend()分析
2014/06/09 Javascript
jQuery 插件开发指南
2014/11/14 Javascript
完美兼容IE,chrome,ff的设为首页、加入收藏及保存到桌面js代码
2014/12/17 Javascript
javascript判断移动端访问设备并解析对应CSS的方法
2015/02/05 Javascript
JavaScript实现向右伸出的多级网页菜单效果
2015/08/25 Javascript
10道典型的JavaScript面试题
2017/03/22 Javascript
vue.js实现备忘录功能的方法
2017/07/10 Javascript
JavaScript实现换肤功能
2017/09/15 Javascript
D3.js实现简洁实用的动态仪表盘的示例
2018/04/04 Javascript
在create-react-app中使用sass的方法示例
2018/10/01 Javascript
详解Vue中watch的详细用法
2018/11/28 Javascript
微信小程序如何调用json数据接口并解析
2019/06/29 Javascript
微信小程序云函数使用mysql数据库过程详解
2019/08/07 Javascript
TypeScript 运行时类型检查补充工具
2020/09/28 Javascript
Python中的__new__与__init__魔术方法理解笔记
2014/11/08 Python
Python栈类实例分析
2015/06/15 Python
在Mac OS上使用mod_wsgi连接Python与Apache服务器
2015/12/24 Python
pandas DataFrame索引行列的实现
2019/06/04 Python
Python Web框架之Django框架Form组件用法详解
2019/08/16 Python
Python异常模块traceback用法实例分析
2019/10/22 Python
python机器学习实现决策树
2019/11/11 Python
python实现两个字典合并,两个list合并
2019/12/02 Python
python数据预处理方式 :数据降维
2020/02/24 Python
利用python制作拼图小游戏的全过程
2020/12/04 Python
如何使用canvas绘制可移动网格的示例代码
2020/12/14 HTML / CSS
阿里云:Aliyun.com
2017/02/15 全球购物
全球采购的街头服饰和帽子:Urban Excess
2020/10/28 全球购物
大学生个人先进事迹材料范文
2014/05/03 职场文书
化工见习报告范文
2014/10/31 职场文书
2015初中团支部工作总结
2015/07/21 职场文书
中学生打架检讨书之500字
2019/08/06 职场文书
PYTHON使用Matplotlib去实现各种条形图的绘制
2022/03/22 Python