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

以下以A为父组件页面,B为子组件页面来说明。其中父组件页面调用子组件,v-bind绑定要传递的值tableLabelTest。

A页面设置如下:

tableLabelTest是动态的,有一个地方给它赋值

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

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

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

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

其中,普通类型是可以在子组件中更改,不会影响其他兄弟子组件内同样调用的来自父组件的值,

但是,引用类型的值,当在子组件中修改后,父组件的也会修改,那么后果就是,其他同样引用了改值的子组件内部的值也会跟着被修改。除非你有特殊的要求这么去做,否则最好不要这么做。由于我从父组件传过来的数组类型的数据,是引用类型,可能会报下图这种错误。

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

Logo

前往低代码交流专区

更多推荐