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 相关文章推荐
Ucren Virtual Desktop V2.0
Nov 07 Javascript
静态页面下用javascript操作ACCESS数据库(读增改删)的代码
May 14 Javascript
利用ASP发送和接收XML数据的处理方法与代码
Nov 13 Javascript
20个非常棒的Jquery实用工具 国外文章
Jan 01 Javascript
intro.js 页面引导简单用法 分享
Aug 06 Javascript
js 模式窗口(模式对话框和非模式对话框)的使用介绍
Jul 17 Javascript
引用其它js时如何同时处理多个window.onload事件
Sep 02 Javascript
javascript实现的图片切割多块效果实例
May 07 Javascript
webpack中引用jquery的简单实现
Jun 08 Javascript
JS开发 富文本编辑器TinyMCE详解
Jul 19 Javascript
JavaScript 继承 封装 多态实现及原理详解
Jul 29 Javascript
Ant Design moment对象和字符串之间的相互转化教程
Oct 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与flash as3 socket通信传送文件实现代码
2014/08/16 PHP
php实现源代码加密的方法
2015/07/11 PHP
实例分析PHP将字符串转换成数字的方法
2019/01/27 PHP
PHP基于面向对象封装的分页类示例
2019/03/15 PHP
Laravel框架处理用户的请求操作详解
2019/12/20 PHP
JS之Date对象和获取系统当前时间详解
2014/01/13 Javascript
jquery中获取元素里某一特定子元素的代码
2014/12/02 Javascript
node.js中的buffer.toString方法使用说明
2014/12/14 Javascript
js实现的下拉框二级联动效果
2016/04/30 Javascript
javascript cookie用法基础教程(概念,设置,读取及删除)
2016/09/20 Javascript
JS树形菜单组件Bootstrap TreeView使用方法详解
2016/12/21 Javascript
jquery做个日期选择适用于手机端示例
2017/01/10 Javascript
jQuery插件FusionCharts绘制的2D条状图效果【附demo源码】
2017/05/13 jQuery
AngularJS遍历获取数组元素的方法示例
2017/11/11 Javascript
vue中实现移动端的scroll滚动方法
2018/03/03 Javascript
详解a标签添加onclick事件的几种方式
2019/03/29 Javascript
[02:24]DOTA2亚洲邀请赛 NAVI战队出场宣传片
2015/02/07 DOTA
python使用生成器实现可迭代对象
2018/03/20 Python
Python+OpenCV图片局部区域像素值处理详解
2019/01/23 Python
在交互式环境中执行Python程序过程详解
2019/07/12 Python
python实现银行管理系统
2019/10/25 Python
Python连接mysql数据库及简单增删改查操作示例代码
2020/08/03 Python
美国知名户外用品畅销中心:Sierra Trading Post
2016/07/19 全球购物
Bitiba意大利:在线宠物商店
2020/10/31 全球购物
美国名牌手表折扣网站:Jomashop
2020/05/22 全球购物
Java基础面试题
2012/11/02 面试题
国外的一些J2EE面试题一
2012/10/13 面试题
中专毕业生的自我鉴定
2013/12/01 职场文书
2014年自我评价
2014/01/04 职场文书
农民致富事迹材料
2014/01/23 职场文书
数控机床专业自荐信
2014/05/19 职场文书
cf战队收人口号
2014/06/21 职场文书
医德考评自我评价
2014/09/14 职场文书
2016年助残日旅游活动总结
2016/04/01 职场文书
工作简历的自我评价
2019/05/16 职场文书
Django利用AJAX技术实现博文实时搜索
2021/05/06 Python