vue组件传递对象中实现单向绑定的示例
更新时间：2018年02月28日 14:02:31 作者：shuaizi96
下面小编就为大家分享一篇vue组件传递对象中实现单向绑定的示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
当使用vue组件时，组件之间经常需要传递数据，这里不讨论传递一个字符串变量或者数字变量的情况，那些去看官方文档就够了，此处提出我在组件间传递对象时遇到的一个坑。
当组件间传递对象时，由于此对象的引用类型指向的都是一个地址，所以在子组件中修改对象的某个属性值，父组件中的对象对应的属性也会随之改变，如果有这种双向绑定的需要，那么这也算一种不错的办法，但如果不需要这种双向绑定，那就要定义一个新的对象来复制原对象的属性和值，坑就在这里，假如你普通的var、let 一个对象，例如：
computed: {
data: function () {
let obj={};
obj=this.message//this.message是父组件传递的对象
return obj
}
},
将data中各属性分别绑定到输入框中，并修改试试，你会发现父组件中对应的属性值还是会改变，并没有实现单向绑定的效果，这时就需要加一个方法了
computed: {
data: function () {
let obj=Object.assign({}, this.message);
return obj
}
},
这样返回的data就是一个新的对象，并不会指向原对象的地址，所以再对其进行修改就不会对父组件中的对象造成影响了。
以上这篇vue组件传递对象中实现单向绑定的示例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
vue.js中使用微信扫一扫解决invalid signature问题(完美解决)
这篇文章主要介绍了vue.js中使用微信扫一扫解决invalid signature问题(推荐),本文通过实例代码给出解决方法，代码简单易懂非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2020-04-04
本文主要介绍了vue中el-cascader三级联动懒加载回显问题解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-06-06
vue项目中有一些方法需要在多个页面调用,但为了避免在每个页面都import进来,可以把方法加到原型上去,这样在每个组件中都能使用了,下面这篇文章主要给大家介绍了关于配置vue全局方法的两种方式,需要的朋友可以参考下2021-09-09
这篇文章主要介绍了解决VUE-Router 同一页面第二次进入不刷新的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
这篇文章主要介绍了vue实现点击关注后及时更新列表功能，本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值，需要的朋友可以参考下2018-06-06
本篇文章主要介绍了详解vue 中使用 AJAX获取数据的方法，在VUE开发时，数据可以使用jquery和vue-resource来获取数据，有兴趣的可以了解一下。2017-01-01
近尝试上手 Vue3+TS+Vite,所以下面这篇文章主要给大家介绍了关于vue3+ts实际开发中该如何优雅书写vue3语法的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2022-10-10
这篇文章主要介绍了vue和element上传图片以及进行拖拽图片排序问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08
vue elementUI tree树形控件获取父节点ID的实例
今天小编就为大家分享一篇vue elementUI tree树形控件获取父节点ID的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
Element树形控件el-tree懒加载并设置默认展开和选中的效果
本文主要介绍了Element树形控件el-tree懒加载并设置默认展开和选中的效果，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-01-01
最新评论