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 相关文章推荐
广告代码静态化js通用函数
May 09 Javascript
extjs 学习笔记(一) 一些基础知识
Oct 13 Javascript
ie支持function.bind()方法实现代码
Dec 27 Javascript
js渐变显示渐变消失示例代码
Aug 01 Javascript
javascript 产生随机数的几种方法总结
Sep 26 Javascript
vue.js实现的经典计算器/科学计算器功能示例
Jul 11 Javascript
vue加载完成后的回调函数方法
Sep 07 Javascript
微信小程序的开发范式BeautyWe.js入门详解
Jul 10 Javascript
koa2服务端使用jwt进行鉴权及路由权限分发的流程分析
Jul 22 Javascript
vue ssr+koa2构建服务端渲染的示例代码
Mar 23 Javascript
Angular5整合富文本编辑器TinyMCE的方法(汉化+上传)
May 26 Javascript
js实现手表表盘时钟与圆周运动
Sep 18 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
咖啡常见的种类
2021/03/03 新手入门
开启CURL扩展,让服务器支持PHP curl函数(远程采集)
2011/03/19 PHP
PHP递归调用的小技巧讲解
2013/02/19 PHP
索趣科技的答案
2007/02/07 Javascript
js图片延迟加载的实现方法及思路
2013/07/22 Javascript
jQuery CSS()方法改变现有的CSS样式
2014/08/20 Javascript
JavaScript 开发工具webstrom使用指南
2014/12/09 Javascript
在IE8上JS实现combobox支持拼音检索功能
2016/05/23 Javascript
全面解析多种Bootstrap图片轮播效果
2016/05/27 Javascript
关于js二维数组和多维数组的定义声明(详解)
2016/10/02 Javascript
JQuery 动态生成Table表格实例代码
2016/12/02 Javascript
Vue.js实现一个todo-list的上移下移删除功能
2017/06/26 Javascript
JavaScript变量作用域_动力节点Java学院整理
2017/06/27 Javascript
详解webpack自动生成html页面
2017/06/29 Javascript
arcgis for js栅格图层叠加(Raster Layer)问题
2017/11/22 Javascript
jQuery中常用动画效果函数知识点整理
2018/08/19 jQuery
Vue学习之组件用法实例详解
2020/01/06 Javascript
vue中axios防止多次触发终止多次请求的示例代码(防抖)
2020/02/16 Javascript
nuxt+axios实现打包后动态修改请求地址的方法
2020/04/22 Javascript
Python中模块与包有相同名字的处理方法
2017/05/05 Python
Python部署web开发程序的几种方法
2017/05/05 Python
Python中字典(dict)合并的四种方法总结
2017/08/10 Python
python 文件转成16进制数组的实例
2018/07/09 Python
Python实现的KMeans聚类算法实例分析
2018/12/29 Python
python区块及区块链的开发详解
2019/07/03 Python
python监控进程状态,记录重启时间及进程号的实例
2019/07/15 Python
python socket 聊天室实例代码详解
2019/11/14 Python
HTML5和CSS3实例教程总结(推荐)
2016/07/18 HTML / CSS
迪卡侬印度官网:购买所有体育用品
2017/06/24 全球购物
方法名是否可以与构造器的名字相同
2012/06/04 面试题
大门门卫岗位职责
2013/11/30 职场文书
石油大学毕业生自荐信
2014/01/28 职场文书
企业百日安全活动总结
2015/05/07 职场文书
学校扫黄打非工作总结
2015/10/15 职场文书
怎样做好公众演讲能力?
2019/08/28 职场文书
引用计数法和root搜索算法以及JVM中判定对象需要回收的方法
2022/04/19 Java/Android