vue组件通信（二）

有这么个特定的环境，父组件有个添加按钮，点击按钮会出现一个弹窗，弹窗里面类似购物车，可加减商品，有确定按钮和取消按钮。

那么如果直接按着正常传值来走的话，会出现个问题，就是还没有点击确定的时候，只做子组件的加减商品，父组件中的绑定的商品也会发生改变。

解析：本以为是写法问题，或者中间传值问题，搜索半天发现都没问题。于是想到了vue的数据双向绑定，当一个值发生了变化，那么页面中的数据也会发生变化。

解决：js数据的深浅拷贝。

最简单的方法

子组件：

this.cityStr = JSON.stringify(cityArr)
this.$emit('cityStr',this.cityStr)

先把要传递的值变成JSON字符串，然后再传递过去，那么父组件接到的数据就是JSON串，然后

this.citys = JSON.parse(data)

就可以获取到值了。

只有在子组件点确定的时候才传值，就不会出现数据错乱的错误了。