父组件向子组件传递数组格式数据,子组件为picker

前言:在vue项目中,子组件是一个弹框,需要在父组件中显示此弹框,其弹框内容来自于父组件。父子组件之间的传值通过props来实现。

         A为父组件页面,B为子组件页面。其中父组件页面调用子组件,v-bind绑定要传递的值chargePeriodArr。

         A页面设置如下:

父组件向子组件传递数组格式数据,子组件为picker

父组件向子组件传递数组格式数据,子组件为picker

    而chargePeriodArr是动态的,有一个地方给它赋值。

父组件向子组件传递数组格式数据,子组件为picker

  子组件B页面props接收父组件传过来的数据

子组件接受父组件的值分为--引用类型和普通类型两种;

①普通类型:字符串(String)、数字(Number)、布尔值(Boolean)、空(Null);

②引用类型:数组(Array)、对象(Object)。

其中,引用类型的值,当在子组件中修改后,父组件的也会被修改,那么,其他同样引用了该值的子组件内部的值也会跟着被修改。 

      为避免这种错误,我们可以设置一个从父组件传过来的数据的copy,如chargePeriodArr1,这个就可以保证chargePeriodArr没有被修改,修改的只是chargePeriodArr1。

父组件向子组件传递数组格式数据,子组件为picker

父组件向子组件传递数组格式数据,子组件为picker

参考博客:

      父组件向子组件传递数组   https://blog.csdn.net/guojing5721/article/details/96156600