一张图说清楚Vue3父子组件传值，以及props可否改的本质问题

Posted 2023-02-28

参考技术A 为了避免混淆，先介绍一下后端语言用的类。
一般类可以包含内部成员、属性、方法、事件等。
内部成员一般都是私有的（其实也可以设置为公有），调用者不可以直接访问内部成员，而是要通过属性来访问内部成员。

属性是内部成员的安全通道，可以限制访问方式，比如只读；也可以设置关卡，比如年龄 > 18 且 年龄 < 60的才可以通过。

vue 的组件，也可以设置 data、props、computed、methods等，看起来和类的设置很像，但是却有着本质的区别。

所以请不要把类的理解和使用方式，生硬的套在 vue 的父子组件上面，要注意区分。

现在来讨论一下，props 到底可不可以改的问题。

按照官网的说法，子组件是不可以修改 props 的，原因云云，于是好多人也跟着说不能改，改了就云云。

那么本质原因是啥呢？知其然还要知其所以然！

这个要从js的数据类型说起，js的类型比较乱，有很多种划分方式，从传递的角度来看，可以分为传值类型和引用类型。

对于传值类型，传递副本之后，副本和“本尊”已经没有任何联系了，副本随便改，都不会影响“本尊”。

引用类型，传递的是自己的地址（指针），所以可以通过地址修改“本尊”的属性，这样改副本就可以影响到“本尊”。

vue组件的 props 能改与不能改，就是这两种传递方式导致的。

我们经常用到组件的 props，那么 props 到底是什么样子的呢？

这里以 Vue3 为例来分析一下，我们设置一个简单的父子组件，设置几种常见的类型：

子组件定义一个 props，有基础类型，和引用类型几个成员。基础类型需要使用 emit 来修改，引用类型（reactive），可以直接通过 proxy 的拦截原理来方向修改。

模板：

js：

父组件定义几个类型的data传递给子组件。基础类型用 ref，引用类型使用 reactive。因为这样可以有响应性。

我们先来看看 props 的打印结果，发现是一个套娃 proxy：

在 vue3 里面，reactive、shallowReactive、readonly、shallowReadonly 都用了proxy，那么到底是哪一种呢？

简单测试一下就会发现是 shallowReadonly（浅层只读），那么问题来了，既然不让改，为啥不用 readonly？是遗漏了吗？

我猜测这是一个平衡各种需求后的折中处理方案。

然后可能官方为了避免心智负担，于是干脆一刀切，就说不让改props，这样就省事了。

而对于懂得原理的，那就可以传递引用类型，实现更简洁的操作方式。

上图比较清晰的表达了数据的流向。

一个常见的例子就是，“弹窗显示表单”。以element-plus 为例：

父组件：

子组件

模板

这样父组件和子组件都可以轻松的控制 el-dialog 了。