vue 如何取消双向绑定

vue中的双向绑定，在单页面中使用起来非常便利，表单数据和对象保持数据一致，但是在某些应用场景下，比如弹窗，我们需要取消双向绑定功能，否则会出现，当我们修改弹窗数据的时候，父页面的数据同步修改的现象，本文主要介绍如何取消双向绑定。

通过 prop 传递数据

 <ChildDialogref="childDialog":dialog-conditions-visible="dialogVisible":groups="formatGroups(form.groupList)"/>...formatGroups(groupList) {if (groupList !== undefined && groupList !== null) {// console.log('formatGroups', JSON.parse(JSON.stringify(groupList)))// 为什么不使用 [...groupList] ，深拷贝与浅拷贝// https://www.cnblogs.com/renbo/p/9563050.htmlreturn JSON.parse(JSON.stringify(groupList))} else {return []}}

如果使用 :groups="form.groupList"，那么在子组件中修改 groupList 的值时，会同时修改父页面中的数据。弹窗单击取消后，数据无法恢复。

传递对象
obj = {...obj}
传递数组
arr = [...arr]
返回数据
对象 this.$set(this.form, name, value)
数组 this.$set(this.list, index, obj)

采用上面的方法，一般情况下是可以实现的，但是遇到多级对象时，依然会被双向绑定，此时，需要用到对象深拷贝，详见：js对象的深拷贝

vue 如何取消双向绑定相关推荐

Vue的数据双向绑定和Object.defineProperty()
Vue是前端三大框架之一,也被很多人指责抄袭,说他的两个核心功能,一个数据双向绑定,一个组件化分别抄袭angular的数据双向绑定和react的组件化思想,咱们今天就不谈这种大是大非,当然我也没到达那 ...
[vue] vue父子组件双向绑定的方法有哪些？
[vue] vue父子组件双向绑定的方法有哪些? 1.利用对象的引用关系来实现 2.父子组件之间的数据传递 3.使用.sync修饰符个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但 ...
[vue] 什么是双向绑定？原理是什么？
[vue] 什么是双向绑定?原理是什么? 双向数据绑定个人理解就是存在data→view,view→data两条数据流的模式.其实可以简单的理解为change和bind的结合.目前双向数据绑定都是基于 ...
Vue 3.0双向绑定原理的实现
proxy方法 vue.js 是采用数据劫持结合发布者-订阅者模式的方式,通过new Proxy()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调. Vu ...
Vue 中实现双向绑定的 4 种方法
1. v-model 指令 <input v-model="text" /> 复制代码上例不过是一个语法糖,展开来是: <input:value="t ...
剖析Vue原理实现双向绑定MVVM
本文能帮你做什么? 1.了解vue的双向数据绑定原理以及核心代码模块 2.缓解好奇心的同时了解如何实现双向绑定为了便于说明原理与实现,本文相关代码主要摘自vue源码, 并进行了简化改造,相对较简陋, ...
Vue 父子组件双向绑定传值
最简单的双向绑定(单文件中)就是表单元素的v-model了,如果同时设置v-model和value,value属性无效. 自定义v-model:(不推荐) child: <template> ...
VUE模拟实现双向绑定
代码展示不使用v-mode实现双向绑定 <!DOCTYPE html> <html lang="en"> <head><meta ch ...
vue实现组件双向绑定
// test.vue<template><div><input v-model="val"><testComponent v-model ...

vue 如何取消双向绑定

vue 如何取消双向绑定相关推荐

最新文章

热门文章