Vue2 利用 v-model 实现组件props双向绑定的优美解决方案

SimonMa 发布于2019-08-21 11:37 / 3241人阅读

摘要：在项目中开始使用来构建项目了，跟很大的一处不同在于取消了的双向绑定，改成只能从父级传到子级的单向数据流，初衷当然是好的，为了避免双向绑定在项目中容易造成的数据混乱。能不能不写来实现的双向绑定呢，答案是可以的。

在项目中开始使用vue2来构建项目了，跟 vue1 很大的一处不同在于2 取消了props 的双向绑定，改成只能从父级传到子级的单向数据流，初衷当然是好的，为了避免双向绑定在项目中容易造成的数据混乱。

解决方案一

然后开始参考网上和github上的方案等等，发现很多解决方案是这样的

用data对象中创建一个props属性的副本

watch props属性赋予data副本来同步组件外对props的修改

watch data副本，emit一个函数通知到组件外

这里以最常见的 modal为例子：
modal挺合适双向绑定的，外部可以控制组件的显示或者隐藏，组件内部的关闭可以控制 visible属性隐藏，同时visible 属性同步传输到外部

///modal.vue  组件





///调用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的值，进行双向绑定

改成如下代码：






///调用modal组件

  

export default {
  name: "app",
  data () {
    return {
      isShow:false
    }
  }
}

这样调用组件的代码是不是很简洁，其他人员要调用的话，会很轻松，只要设置 isShow 就可以控制 modal 组件的显示或者隐藏，同时如果是modal 组件内部关闭按钮关闭的，状态也会传到 isShow

GPU云服务器云服务器可以利用vps实现的是什么双向绑定双向数据绑定 java优美的代码

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/86937.html

vue2实践（持续更新）

摘要：记录一些小技巧和踩过的坑由于本篇文章内容太多，导致编辑器有点卡，所以新开辟了一篇实践二，后续再这里更新。组件的生命周期函数是在标签里的数据发生变化时候触发数据可能更新了，但是没有绑定到上面的话，不会调用钩子函数。记录一些小技巧和踩过的坑由于本篇文章内容太多，导致SF编辑器有点卡，所以新开辟了一篇 vue2实践（二），后续再这里更新。 1. props 带不带冒号的区别 ...

n7then 2019-08-20 15:05 评论0 收藏0
深刻理解Vue中的组件

摘要：还可以在某个实例中注册只有自己能使用的组件。当在一个组件中，使用了其他自定义组件时，就会利用子组件的属性和事件来和父组件进行数据交流。正确的做法是，在父组件中绑定属性值时，加上修饰符。 2019-06-20更新: Vue2.6已经更新了关于内容插槽和作用域插槽的API和用法，为了不误导大家，我把插槽的内容删除了。详情请看官网 2018-07-19更新: 更新作用域插槽的属性: sco...

mdluo 2019-08-20 18:34 评论0 收藏0
vue2.0学习笔记（表单输入绑定）

摘要：复选框当选中时当没有选中时这里的和特性并不会影响输入控件的特性，因为浏览器在提交表单时并不会包含未被选中的复选框。 1、基础用法 v-model指令可以实现表单元素和Model中数据的双向数据绑定。只能运用在表单元素中（input、radio、text、address、email、select、checkbox、textarea）可以用 v-model 指令在表单、及元素上...

Seay 2019-08-23 18:35 评论0 收藏0
详解vue组件三大核心概念

摘要：前言本文主要介绍属性事件和插槽这三个基础概念使用方法及其容易被忽略的一些重要细节。至于如何改变，我们接下去详细介绍单向数据流这个概念出现在组件通信。比如上例中在子组件中修改父组件传递过来的数组从而改变父组件的状态。的一个核心思想是数据驱动。前言本文主要介绍属性、事件和插槽这三个vue基础概念、使用方法及其容易被忽略的一些重要细节。如果你阅读别人写的组件，也可以从这三个部分展开，它们...

rickchen 2019-08-23 17:51 评论0 收藏0
一套基于vue2.0高质量的UI框架，前期开发中

摘要：使用属性时选中的值为的值默认值属性类型说明组合中的所有全部禁用默认值属性类型说明组合中所有的尺寸默认值属性类型说明类似这样的数组，其中指定当前项是否选中，为当前项的文字描述默认值组件组件组件组件组件组件组件组件写在前边自己在业余时间开发的一套基于vue的UI框架，初衷是在平时的开发过程中，发现有很多业务利用现有的UI框架实现起来比较麻烦，另外自己也希望可以写一套可以尽量多的满足业务...

explorer_ddf 2019-08-26 14:06 评论0 收藏0