Vue方向:父组件向子组件传值的分类

通过前面了解到,父组件向子组件传递数据是,子组件通过props属性接收,但是不能随意的更改props属性中的数据。

子组件通过props属性成功接收父组件传递过来的数据,这就是父组件向子组件传值。

数据传递分类

都知道在JS中数据分为两大类,基本数据类型和引用数据类型,因此在父组件向子组件传递数据时也分为传值和传引用。

传值:String    Number    Boolean

传引用:Array  Object


1、传递的是基本类型

基本类型:顾名思义,就是传递JS基本数据类型的数据

首先弄清楚 v-bind:count="123" 和 count="456" 绑定的内容的区别

1、v-bind:count="123" 使用v-bind的动态的数据绑定,此时双引号已不再具有字符串的使用功能,此时绑定的是数字。

2、count="456" 单纯的是绑定等号后面的所有内容,所以绑定的是字符串。

使用v-bind指令,属性值中引号的内容将变成表达式,那么就可以传递任何JS数据类型的数据

这即是Vue官网中关于props静态传输和动态传输


静态传输

代码
vue-devtools

动态传输

代码
vue-devtools



2、传递的是引用类型的值

传引用就是传递引用类型的值

其实我们最想关注的是,传递引用类型的数据是数据的拷贝,还是内存地址的拷贝

因为这涉及到在子组件中是否可以通过props修改父组件中的数据!

代码
vue-devtools

可以明确的看到,使用v-bind的话,,动态绑定的值是会作为表达式处理的。


当修改父组件传递过来的引用数据时,子组件的数据也发生了变化

原因在于父组件向子组件传递引用类型数据传递的是引用数据类型的内存地址也就是说两个组件共享一个数据,当一个组件修改数据时,另一个组件得到的数据当然也会发生变化,因为两个使用的是同一个数据。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容