子组件改值 vue父子通信的一个特性及利用小技巧

一  效果演示

vue2,vue3中在子组件直接改值

先花2分钟看案例

在图 1 中，有四项活动，而每一项都是我在父组件中循环的子组件，子组件有个点击事件，点击那一项，对应添加 ‘喜欢’图标 或者 取消图标。

在子组件，通过props接收到了父组件传来的数据,子组件 有一个点击事件,直接改props的值

25行代码顺便打印一下这个值,再看看控制台

可以看到，控制台是没有报错的，并且也正确修改了图标的喜欢状态。

二  原因分析

接下来分析下出现这种情况的原因：

1.JavaScript 数据类型

    值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol。

   2. 引用数据类型：对象(Object)、数组(Array)、函数(Function)。

因为我传进来的menu是个对象，属于引用类型，修改子组件相当于把父组件也同时修改了。

父组件传递给子组件的，实际上只是一个引用地址，当子组件修改这个对象时，是真的修改了在堆空间中保存的数值，当然父组件中的值也会发生变化，但是引用地址没有进行修改，所以并没有报错。

三  官方解释

Props 传值

当对象或数组作为 props 被传入时，虽然子组件无法更改 props 绑定，但仍然可以更改对象或数组内部的值。这是因为 JavaScript 的对象和数组是按引用传递。