vue中props的双向绑定

Amos 发布于2019-08-23 14:07 / 2222人阅读

摘要：在的学习中，一开始我是自己写组件练手的，在这个过程中我遇到一个问题父组件传递给子组件参数直接在子组件里直接使用是可以实时更新的如果在，等声明或者直接赋值给的时候，再用的时候是不可以实时更新的内部的是可以实时更新的但是内部不可以强制去改变父元

在vue的学习中，一开始我是自己写组件练手的，在这个过程中我遇到一个问题：
props：父组件传递给子组件参数
（1）props直接在子组件里直接使用是可以实时更新的
（2）props如果在created，mounted等声明或者直接赋值给data的时候，再用data的时候是不可以实时更新的
（3）内部的data是可以实时更新的
（4）但是内部不可以强制去改变父元素传递过来的props，这样是官方不允许的而且是不严谨的

那么，我在写模态框组件的时候就产生一个很矛盾的问题，如果父级props控制了组件内部的显示和隐藏，
内部点击模态框阴影的时候也可以让其自动隐藏，我到底去修改什么值，修改了之后怎么去改变父组件传递过来的props，
给全局一个反馈呢。
在看过文章和自己动手操作后选取了一种方式，将内部的data和props进行关联，采用vue中v-modal的原理，值发生变化（input事件），
对应的数据也发生相应的改变：
不多说，直接贴代码：

子组件：
template：

javascript：

import { mapState, mapActions } from "vuex"
  import _ from "lodash"

  export default {
    name: "msg-modal",
    data () {
      return {
        isShow: this.value
      }
    },
    props: {
      value: {
        type: Boolean,
        default: false
      },
      closeable: {
        type: Boolean,
        default: false
      },
      btnTxt: {
        type: [String, Number],
        default: "确定"
      },
      content: {
        default: "内容"
      }
    },
    watch: {
      value (val) {
        this.isShow = val;
      },
      isShow (val) {
        this.$emit("input", val);
      }
    },
    computed: {
      ...mapState({
        allAnchorList: state => state.anchor.list.data
      })
    },
    methods: {
      ...mapActions(["removeAnchor"]),
      onClick () {
        this.$emit("onClick")
      },
      onMaskClose () {
        if(!this.closeable) {
          return
        }

        Object.assign(this.$data, this.$options.data())
      }
    }
  }

less：

.modal {
  position: fixed;
  z-index: 800;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: table;
  transition: all .3s;
  background-color: transparent;

  &.active{
    opacity: 1;
  }

  .modal-mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-color: rgba(0, 0, 0, .5);
  }

  .modal-wrapper {
    display: table-cell;
    vertical-align: middle;
    .modal-container {
      width: 300px;
      margin: 0 auto;
      border-radius: 2px;
      //box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
      transition: all .3s ease;
      font-family: Helvetica, Arial, sans-serif;
      .header{
        position: relative;
        backgroud-color: #fff,
        min-height: 50px;
      }

      .modal-body {
        margin: 20px 0;
      }
      
     .footer {
      padding-bottom: 26px;
      overflow: hidden;
      border-bottom-left-radius: 4px !important;
      border-bottom-right-radius: 4px !important;
      background-color: #fff;
      .btn {
        height: 36px;
        line-height: 36px;
        width: 230px;
        margin: 0 auto;
        color: #fff;
        font-size: 14px;
        text-align: center;
        cursor: pointer;
        user-select: none;
        background-color: #2859ED;
        border-radius: 4px;
      }
     }
    }
  }
}

父组件的引用：
template:



javascript:

样式随便写的，
主要就是用vue的v-model原理，将值与被传递的props实现双向绑定，
需要注意的是在组件mounted的时候需要对组件初始化中的传递的props赋值给绑定的v-model的value
自己也是才摸索vue全家桶阶段，才没做两个项目
有不足的地方请大家见谅和指导
欢迎大家讨论

云服务器 GPU云服务器双向绑定双向数据绑定 js双向绑定 js双向数据绑定

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

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

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

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

SimonMa 2019-08-21 11:37 评论0 收藏0
Vue双向绑定原理，教你一步一步实现双向绑定

摘要：储存订阅器因为属性被监听，这一步会执行监听器里的方法这一步我们把也给弄了出来，到这一步我们已经实现了一个简单的双向绑定了，我们可以尝试把两者结合起来看下效果。总结本文主要是对双向绑定原理的学习与实现。当今前端天下以 Angular、React、vue 三足鼎立的局面，你不选择一个阵营基本上无法立足于前端，甚至是两个或者三个阵营都要选择，大势所趋。所以我们要时刻保持好奇心，拥抱变化，...

Labradors 2019-08-23 12:31 评论0 收藏0
前端MVVM模式及其在Vue和React中的体现

摘要：在模式中一般把层算在层中，只有在理想的双向绑定模式下，才会完全的消失。层将通过特定的展示出来，并在控件上绑定视图交互事件，一般由框架自动生成在浏览器中。三大框架的异同三大框架都是数据驱动型的框架及是双向数据绑定是单向数据绑定。 MVVM相关概念 1） MVVM典型特点是有四个概念：Model、View、ViewModel、绑定器。MVVM可以是单向绑定也可以是双向绑定甚至是不绑...

沈建明 2019-08-23 12:36 评论0 收藏0
vue中props的双向绑定

摘要：在的学习中，一开始我是自己写组件练手的，在这个过程中我遇到一个问题父组件传递给子组件参数直接在子组件里直接使用是可以实时更新的如果在，等声明或者直接赋值给的时候，再用的时候是不可以实时更新的内部的是可以实时更新的但是内部不可以强制去改变父元在vue的学习中，一开始我是自己写组件练手的，在这个过程中我遇到一个问题：props：父组件传递给子组件参数（1）props直接在子组件里直接使用...

vvpale 2019-08-30 15:54 评论0 收藏0