通过前面了解到,父组件向子组件传递数据是,子组件通过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静态传输和动态传输
静态传输
动态传输
2、传递的是引用类型的值
传引用就是传递引用类型的值
其实我们最想关注的是,传递引用类型的数据是数据的拷贝,还是内存地址的拷贝
因为这涉及到在子组件中是否可以通过props修改父组件中的数据!
可以明确的看到,使用v-bind的话,,动态绑定的值是会作为表达式处理的。
当修改父组件传递过来的引用数据时,子组件的数据也发生了变化
原因在于父组件向子组件传递引用类型数据传递的是引用数据类型的内存地址也就是说两个组件共享一个数据,当一个组件修改数据时,另一个组件得到的数据当然也会发生变化,因为两个使用的是同一个数据。