如果prop传递的是一个对象或数组那么它是按引用传递的吗？

点击联系发帖人 时间：2022-06-02 15:20

form表单提交对象数组

比如子组件中有下面的props，其中的item 是个多层嵌套的对象。

a , b, c 三个属性值，在子组件中功能不一样。如果各自的值改变，要$emit 到父组件，如何把变更后的值传递到父组件呢？
父组件要写几个不同的接收函数区别对待吗？
怎么传值比较简洁高效？

你不需要传递，父组件会同步拿到最新的值，因为你的 props 是引用类型的，最多你只要 $emit 一个事件，告诉父组件变化了，就 okay 了

}

在写项目时遇到一个问题，父组件传到子组件的prop，在子组件监听不到变化，

遂查看vue文档，得知watch有一种深度监听的方法。

阅读vue文档如下代码。=》

// 该回调会在任何被侦听的对象的 property 改变时被调用，不论其被嵌套多深 // 该回调将会在侦听开始之后被立即调用 // 你可以传入回调数组，它们会被逐一调用

这时就可以监听到对象内部的属性变化了。

疑惑，项目中单层的对象，没有嵌套的对象，居然也监听不到变化。

}

笔记内容：学习在 Vue 的单文件组件中如何管理数据。

众所周知，Vue是一个响应式的前端组件框架。响应式即是当业务逻辑中的数据发生改变的时候视图中的内容也会跟着改变。

如上，data 函数返回了一个包含 classmates 数组的对象，当在创建一个 vue 的时候会将 data 函数返回的对象中的所有属性都加入到响应式系统中。

Q：data 为什么是函数？

A：只有返回一个生产 data 的函数，这个组件产生的每一个实例才能维持一份被返回对象的独立的拷贝。JS 中的对象都是通过引用关联的，如果使用的是同一个对象，那么可能会引用到同一个对象，数据可能就会发生紊乱。( Vue官网的解释： )

Prop 是约定了从父组件向子组件传参的一个接口，可以通过 Prop 从父组件向子组件传递参数。

子组件声明了一个 props，这个 props 是 parentName，然后模板插值打印出来 parentName（得到父组件通过prop传递过来的参数后）。

　　通过 props 从父组件向子组件传递了参数后，如果想要在子组件修改 props ，有人可能会尝试通过生命周期的钩子 mounted 改，但是这会报错，因为 Vue 从 Vue2 开始是单向数据流的。

　　从前面的例子可以知道，在 Vue2 里面父组件 props 的更新会流到子组件，但是反过来不行，这样子做的目的主要是防止子组件意外地改变父组件的状态从而导致应用数据难以理解，为什么这样说呢？因为 JS 中的对象是通过引入传入的，在对于一个数组或者对象类型的 props 来说，在子组件中去改变数组或者对象本身将影响到父组件之间的状态，如果组件层级比较多的时候，或者说这个数据被多个组件共享的时候，我们很难琢磨到组件是被哪里修改的。

// 带有默认值的字符串 // 这个值必须匹配下列字符串中的一个

父组件传入的参数是 “nana”，通过Prop验证，控制台没有报错。

如果将 App.vue 代码第 3 行传入的参数改为 “nana” 或 “mona” 以外的值，Prop验证将不通过，控制台会报错。

计算属性和侦听器的笔记：

}

绿色游网