Vue使用.sync 实现父子组件的双向绑定数据问题
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 实现父子组件的双向绑定数据问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!
相关推荐
-
vue 自定义组件 v-model双向绑定、 父子组件同步通信的多种写法
上篇文章给大家介绍了浅析Vue自定义组件的v-model,大家可以参考下.接下来通过本文给大家介绍vue 自定义组件 v-model双向绑定. 父子组件同步通信的多种写法,具体详情如下所示: 父子组件通信,都是单项的,很多时候需要双向通信.方法如下: 1.父组件使用:msg.sync="aa" 子组件使用$emit('update:msg', 'msg改变后的值xxx') 2.父组件传值直接传对象,子组件收到对象后可随意改变对象的属性,但不能改变对象本身. 3.父组件使用: v-mo
-
vue 之 .sync 修饰符示例详解
在一些情况下,我们可能会需要对一个 prop (父子组件传递数据的属性) 进行"双向绑定". 在vue 1.x 中的 .sync 修饰符所提供的功能.当一个子组件改变了一个带 .sync 的prop的值时,这个变化也会同步到父组件中所绑定的值. 这很方便,但也会导致问题,因为它破坏了单向数据流.(数据自上而下流,事件自下而上走) 由于子组件改变 prop 的代码和普通的状体改动代码毫无区别,所以当你光看子组件的代码时,你完全不知道它合适悄悄地改变了父组件的状态. 这在 debug 复杂
-
详解vue中async-await的使用误区
曾经见过为了让钩子函数的异步代码可以同步执行,而对钩子函数使用async/await,就好像下面的代码: // exp-01 export default { async created() { const timeKey = 'cost'; console.time(timeKey); console.log('start created'); this.list = await this.getList(); console.log(this.list); console.log('end
-
vue .sync修饰符的使用详解
vue的官网介绍非常不错,先通读一遍. 2.3.0+ 新增 在有些情况下,我们可能需要对一个 prop 进行"双向绑定".不幸的是,真正的双向绑定会带来维护上的问题,因为子组件可以修改父组件,且在父组件和子组件都没有明显的改动来源. 这也是为什么我们推荐以 update:my-prop-name 的模式触发事件取而代之.举个例子,在一个包含 title prop 的假设的组件中,我们可以用以下方法表达对其赋新值的意图: this.$emit('update:title', newTi
-
详解VUE自定义组件中用.sync修饰符与v-model的区别
.sync修饰组件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue-03</title> <!-- 引入Vue --> <link href="https://cdn.bootcss.com/bootstrap/4.1.1/css/bootstrap.min.css&q
-
Vue父子组件双向绑定传值的实现方法
父子组件之间的双向绑定非常简单,但是很多人因为是从Vue 2+开始使用的,可能不知道如何双向绑定,当然最简单的双向绑定(单文件中)就是表单元素的 v-model 了,例如 <input type="text" /> 它会响应表单元素的 value 属性,当输入框文本改变时,会将 value 值传给 v-model 所绑定的变量,如果同时设置 v-model 和 value , value 属性无效. 父子组件的自定义双向 v-model 当若干dom封装成组件时,在父组件中
-
如何理解Vue的.sync修饰符的使用
本文介绍了Vue的.sync修饰符的使用,分享给大家,也给自己留个笔记 案例 <div id="app"> <div>{{bar}}</div> <my-comp :foo.sync="bar"></my-comp> <!-- <my-comp :foo="bar" @update:foo="val => bar = val"></my-
-
Vue使用.sync 实现父子组件的双向绑定数据问题
1.前言 最近在vue 项目中有一个需求, 就是我需要根据不同的类型在页面中放不同的组件, 组件需要跟当前页面的数据进行双向绑定,如果都写在同一个页面 代码会显得比较多,毕竟我当前页面已经7-800行代码了 所以我需要把一些元素定义成组件 ,封装起来,所以就会遇到 数据的传值绑定问题 2.父组件 首先我们来看看官方文档 [ https://cn.vuejs.org/v2/guide/components.html#sync-修饰符 ] .sync 修饰符所提供的功能.当一个子组件改变了一个 pr
-
详解Angular中实现自定义组件的双向绑定的两种方法
在 Angular 中,对于表单元素,通过 [(ngModel)] 即可以简单地实现双向绑定.对于自定义组件而言,希望实现同样的效果可以怎么做呢? 1 实现自定义组件的 ngModel 指令 如果希望自定义组件能够具有与表单元素相同的 ngModel 效果,可以通过在组件内实现 ControlValueAccessor 接口达到目的. 对于 [(ngModel)] ,需要至少实现该接口的如下方法: interface ControlValueAccessor { writeValue(obj:
-
Vue中的父子组件通讯以及使用sync同步父子组件数据
前言 父子组件通讯,可分为两种情况: 1. 父组件向子组件中传递数据 2. 子组件向父组件中传递数据 一般情况下, 1中情况可通过props解决数据传递的问题, 这里就不多赘述了. 子组件向父组件中传递数据 主要谈谈2中情景的实现,有三种方式: 一. 通过props,父组件向子组件中传递数据和改变数据的函数,通过在子组件中调用父组件传过来的函数,达到更新父组件数据(向父组件传递数据)的作用(子组件中需要有相应的响应事件) 二. 通过在子组件中触发一个 自定义事件(vm.$emit),将数据作为v
-
vue 进阶之实现父子组件间的传值
本章我们将深入了解一下组件,并实现父子组件间的传值. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue</title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> </head&g
-
vue单页开发父子组件传值思路详解
vue单页开发时经常需要父子组件之间传值,自己用过但是不是很熟练,这里我抽空整理了一下思路,写写自己的总结. GitHub地址:https://github.com/leileibrother/wechat-vue 文件目录如下图,example.vue是父组件,exampleChild.vue是子组件. 父组件引入子组件,父组件html的代码如下: <template> <div> <h3>这是父组件</h3> <p style="marg
-
vue自定义组件实现v-model双向绑定数据的实例代码
项目中会遇到自定义公共组件供项目调用,正常情况可以使用 props定义参数接收父组件传的参数,然后通过子组件的$emits()方法回传数据给父组件. 类似如下: 父组件 <common-checkbox :checked="goodsSelected" class="left" :height="'16px'" :width="'16px'" @checkChange="checkChange">
-
Vue2实现组件props双向绑定
Vue学习笔记-3 前言 Vue 2.x相比较Vue 1.x而言,升级变化除了实现了Virtual-Dom以外,给使用者最大不适就是移除的组件的props的双向绑定功能. 以往在Vue1.x中利用props的twoWay和.sync绑定修饰符就可以实现props的双向绑定功能,但是在Vue2中彻底废弃了此功能,如果需要双向绑定需要自己来实现. Vue2的组件props通信方式 在Vue2中组件的props的数据流动改为了只能单向流动,即只能由组件外(调用组件方)通过组件的DOM属性attribu
-
Vue2.0利用 v-model 实现组件props双向绑定的优美解决方案
在项目中开始使用vue2来构建项目了,跟 vue1 很大的一处不同在于2 取消了props 的双向绑定,改成只能从父级传到子级的单向数据流,初衷当然是好的,为了避免双向绑定在项目中容易造成的数据混乱. 解决方案一 然后开始参考网上和github上的方案等等,发现很多解决方案是这样的 用data对象中创建一个props属性的副本 watch props属性 赋予data副本 来同步组件外对props的修改 watch data副本,emit一个函数 通知到组件外 这里以最常见的 modal为例子:
-
vue双向绑定数据限制长度的方法
vue双向绑定数据如何限制长度?具体方法请阅读文章 问题描述 vue中输入框v-modle 双向绑定的数据:在需要的业务场景下需要对其进行字数长度限制: 解决方案 可以使用以下方法: 方法一: //方法一:输入框添加keypress方法:然后函数为: maxLength(attr,length){ let keyCode = event.keyCode; console.log("keyCode"); let len=0; console.log(this[attr].length);
随机推荐
- js检测用户输入密码强度
- VBScript压缩单个文件为zip格式
- 匹配5到10位无重复数字的正则表达式
- EJB基础知识(入门必看)
- JS实现在线统计一个页面内鼠标点击次数的方法
- c#中的常用ToString()方法总结
- C#线程 BeginInvoke和EndInvoke使用方法
- js 变量类型转换常用函数与代码[比较全]
- 给初学者的30条PHP最佳实践(荒野无灯)
- linux c 获取本机公网IP的实现方法
- Cisco网络防火墙配置方法
- Android Activity与Fragment之间的跳转实例详解
- Java编写多功能万年历程序的实例分享
- webpack处理 css\less\sass 样式的方法
- C语言 实现N阶乘的程序代码
- Android实现网易新闻客户端侧滑菜单(2)
- 基于JS实现仿京东搜索栏随滑动透明度渐变效果
- jQuery实现页码跳转式动态数据分页
- 对python多线程中互斥锁Threading.Lock的简单应用详解
- OpenCV2从摄像头获取帧并写入视频文件的方法
其他
- iview 打包到springboot
- nginx 反向代理 f5刷新空白
- urlib发post请求
- python日志模块yaml
- 虚拟机中的centos7访问不了tomcat
- ajax实现校验并修改密码
- java发送报文xml
- Navicat Premium 15 连接mangoDb
- vue 动态修改favicon
- @antv/f2 条状图 背景色
- 易语言正则匹配出来的多行数量如何取出来
- vue 好看的上传图片样式
- MFC中的tab控件如何实现滚动
- anaconda安装transformers
- ziplist和数组的区别
- 柱状图y轴计算echarts
- vuex 退出 清空缓存
- mysql 多次MAX()
- beautifulsoap 获取标签
- python自定义排序规则