Vue2 利用 v-model 实现组件props双向绑定的优美解决方案
在项目中开始使用vue2来构建项目了,跟 vue1 很大的一处不同在于2 取消了props 的双向绑定,改成只能从父级传到子级的单向数据流,初衷当然是好的,为了避免双向绑定在项目中容易造成的数据混乱。
解决方案一
然后开始参考网上和github上的方案等等,发现很多解决方案是这样的
用data对象中创建一个props属性的副本
watch props属性 赋予data副本 来同步组件外对props的修改
watch data副本,emit一个函数 通知到组件外
这里以最常见的 modal为例子:
modal挺合适双向绑定的,外部可以控制组件的 显示或者隐藏,组件内部的关闭可以控制 visible属性隐藏,同时visible 属性同步传输到外部
///modal.vue 组件
<template><div class="modal" v-show="visible"><div class="close" @click="cancel">X</div></div>
</template><script>
export default {name:'modal',props: {value: {type: Boolean,default:false}},data () {return {visible:false}},watch:{value(val) {console.log(val);this.visible = val;},visible(val) {this.$emit("visible-change",val);}},methods:{cancel(){this.visible = false;}},mounted() {if (this.value) {this.visible = true;}}
}
</script>///调用modal组件
<modal :value="isShow" @visible-change="modalVisibleChange"></modal>export default {name: 'app',data () {return {isShow:true,}},methods:{modalVisibleChange(val){this.isShow = val;}}
}
这样就解决了 组件props 双向绑定的问题。 但是这样有一个不是太美观的现象就是 在父级调用 modal组件的时候,还需要写一个 modalVisibleChange 的methods. 总是显得这部分代码是多余的。 特别是写一个让别人用的公共组件,这样调用太麻烦了。
能不能不写method来实现props的双向绑定呢,答案是可以的。
优美解决方案
那就是利用 v-model, 然后使用value来保存v-model的值,进行双向绑定
改成如下代码:
<template><div class="modal" :value="value" v-show="visible"><div class="close" @click="cancel">X</div></div>
</template><script>
export default {props: {value: {type: Boolean,default:false}},data () {return {visible:false}},watch:{value(val) {console.log(val);this.visible = val;},visible(val) {this.$emit('input', val);}},methods:{cancel(){this.visible = false;}},mounted() {if (this.value) {this.visible = true;}}
}
</script>///调用modal组件<modal v-model="isShow"></modal>export default {name: 'app',data () {return {isShow:false}}
}
</script>
这样调用组件的代码是不是很简洁,其他人员要调用的话,会很轻松,只要设置 isShow 就可以控制 modal 组件的显示或者隐藏,同时 如果是modal 组件内部关闭按钮关闭的,状态也会传到 isShow
Vue2 利用 v-model 实现组件props双向绑定的优美解决方案相关推荐
- Vue实现组件props双向绑定解决方案
注意: 子组件不能直接修改prop过来的数据,会报错 方案一: 用data对象中创建一个props属性的副本 watch props属性 赋予data副本 来同步组件外对props的修改 watch ...
- vue自定义组件实现双向绑定
场景: 我们比较常用的父子组件之间的交互方式: 父组件通过props将数据流入到子组件: 子组件通过$emit将更新后的数组发送的父组件: 今天,我们通过另一种方式实现交互,参考input框的v-mo ...
- vue 自定义组件 v-model双向绑定、 父子组件同步通信
父子组件通信,都是单项的,很多时候需要双向通信.方法如下: 1.父组件使用:msg.sync="aa" 子组件使用$emit('update:msg', 'msg改变后的值xxx ...
- angular中自定义组件实现双向绑定
使用get,set关键字 get返回父组件变化后的值 set为组件值产生变化后父组件改变 import {Input, Output } from '@angular/core'; ........ ...
- 【笔记】vue父子组件数据双向绑定(v-model、prop.aync)
文章目录 一.v-model 1.最简写法 2.可自定义属性名的写法(2.2.0+) 3.多绑 二..sync [自定义组件的 v-model - Vue.js 中文文档]:(https://vuej ...
- vue 父子组件传值 双向绑定
父组件: <template> //:content , @content 中的:@一个是v-bind 一个是v-on的写法. //:content="detail" ...
- Vue2利用分支、循环、属性样式绑定实现选项卡图片切换
课前准备 带领大家学习分支(if.else).以及循环(for) 至于属性与样式绑定在上一篇文章已经讲解 分支 循环 实现选项卡 分支(if.else if.else) 主要指if.else if.e ...
- vue自定义组件数据双向绑定,获取vue自定义组件input框输入的值
1.首先创建一个自定义组件 Vue.component('test-component',{template:`<div id="el"><input @inpu ...
- 利用Object.defineProperty实现Vue数据双向绑定
body部分很简单,一个输入框和一个展示的div <div><p>你好,<input id='nickName'></p><div id=&quo ...
最新文章
- Windows Server 2016 Technical Preview 5 X64 中文版下载地址
- UA MATH563 概率论的数学基础 中心极限定理22 度量概率空间中的弱收敛 Portmanteau定理
- 44.更多replace案例
- 注意!FOB条款下,发货人还有这些费用要承担?
- Escape The Maze (hard version) 多源最短路,bfs(1900)
- 20211231 使用windows 10代理时,快捷设置“手动设置代理”的“不使用代理”条目
- java 性能调优_Java性能调优调查结果(第二部分)
- 使用序列化反序列化实现学生管理系统
- Java Collection小结
- 计算机控制系统感受,计算机控制系统实验报告一.doc
- 【设计模式】快速全面通俗易懂的设计模式讲解(以大白话例子讲解)
- JSP request对象
- PHP反序列化-__wakeup()方法漏洞(CVE-2016-7124)
- Amlogic Linux系列(四) 视频解码分析2
- win11java环境配置
- gcc -wall -pedantic -ansi
- java降噪_耳机降噪技术有哪几种?
- Unix的学习(一)
- 汶川大地震的捐款风波
- “联创黔线”杯大数据应用创新大赛
热门文章
- 71 说出常用的类、包、接口各5个
- Spring3.1+SpringMVC3.1+JPA2.0
- Linux 中SeLinux 的禁用方式
- HTML 标签自定义属性
- System Memory Management in Windows CE .NET
- Python练习3-XML-RPC实现简单的P2P文件共享
- hdu4415 不错的想法题
- C语言经典例26-利用递归方法求阶乘
- 【Android 逆向】使用 DB Browser 查看并修改 SQLite 数据库 ( 下载 DB Browser 安装包 | 安装 DB Browser 工具 )
- 【Kotlin】Kotlin enum 枚举类 ( 常用用法 | 初始化成员变量 | 实现抽象方法 | 实现接口 | 获取名称和位置索引 | 调用枚举常量方法 )