vue中子组件向父组件传值,会实时更新吗?

Question

vue项目中遇到这样一个问题:

触发子组件的一个事件,事件中emit触发父组件的自定义事件,向父组件发送了一个数组;
在父组件中的自定义事件中拿到这个数组之后,赋值给定义在data中的一个变量,然后用这个变量去渲染了一个列表;
整个代码中从头到尾子组件只emit了一次,也就是说父组件只接受了子组件的数组一次,拿到后也只给data赋值了一次;

但问题来了,我修改子组件的数组内容(push,splice),父组件中的列表也跟着变了,这什么情况?

然后我写了个demo,发现如果传的是个数值或字符串,在子组件中修改,父组件中的内容不会变...

有遇到此类问题的人吗?求解答

Answer 1

因为数组是引用类型，数值or字符串是基本类型，引用类型的更改会引起连锁反应，你如果实在不想改的话，就在emit的时候深拷贝一份给父组件

比如数组为arr，
emit的时候不直接传递arr，而是传递JSON.parse(JSON.stringify(arr))这个值，就可以了，当然实现深拷贝的方法有很多种，这只是其中一种

Answer 2

splice会直接改变数组，所以父组件更新。如果不想跟新，跟一楼一样深拷贝。
为什么字符和数字不会更新。因为你改变的时候，父组件的data中的数据并没有更新。一般改变数字，字符串都是
this.XXX=XXXXXX;
也可以改变数组。this.arr = [XXX]之类的。
但是在子组件this并不是父组件的this.所以改变不了父组件的字符。
所以你在子组件操作不能改变父组件的字符。
js改变数组的方式有很多。其中由于splice不需要写成this.arr = arr.splice()
而是直接 arr.splice()就会改变数组，所以出现了你说的改变了父组件的数据。

如果想改变父组件的字符串和数字。那就是其他的方法了。

1. 父组件 <child :str.sync="this.str" />
   子组件 this.$emit('update:str','新字符')

2. 父组件 <child v-on:str="getChild" />
   data:{

    return {
        str:'XXX'
    }

   }
   methods:{

    getChild(val){
        this.str = val
    }

   }

   子组件
   this.$emit('str','新字符')

3. vuex