父组件向子组件传递数组格式数据
vue项目中,子组件是一个弹框,需要做父组件中显示此弹框,其弹框内容来自于父组件。父子组件之间的传值通过props来实现。以下以A为父组件页面,B为子组件页面来说明。其中父组件页面调用子组件,v-bind绑定要传递的值tableLabelTest。A页面设置如下:tableLabelTest是动态的,有一个地方给它赋值子组件B页面props接收父组件传过来的数据,子...
vue项目中,子组件是一个弹框,需要做父组件中显示此弹框,其弹框内容来自于父组件。父子组件之间的传值通过props来实现。
以下以A为父组件页面,B为子组件页面来说明。其中父组件页面调用子组件,v-bind绑定要传递的值tableLabelTest。
A页面设置如下:
tableLabelTest是动态的,有一个地方给它赋值
子组件B页面props接收父组件传过来的数据,
子组件接受的父组件的值分为——引用类型和普通类型两种,
普通类型:字符串(String)、数字(Number)、布尔值(Boolean)、空(Null)
引用类型:数组(Array)、对象(Object)
其中,普通类型是可以在子组件中更改,不会影响其他兄弟子组件内同样调用的来自父组件的值,
但是,引用类型的值,当在子组件中修改后,父组件的也会修改,那么后果就是,其他同样引用了改值的子组件内部的值也会跟着被修改。除非你有特殊的要求这么去做,否则最好不要这么做。由于我从父组件传过来的数组类型的数据,是引用类型,可能会报下图这种错误。
为避免报这种错误,我们可以设置一个从父组件传过来的数据的copy,如tableLabelTest1,这个就可以保证tableLabelTest没有被修改,修改的只是tableLabelTest1
更多推荐
所有评论(0)