vue 父子组件传值问题

情景描述:子组件是一个省市区三级地址组件,父组件通过向子组件传一个对象,使其有一个默认的地址。父组件向子组件传递省市区名称,子组件根据名称,使用计算属性获取对应地址列表。

父组件向子组件传一个对象,模型如下

vue 父子组件传值问题_第1张图片

子组件有一个默认的对象,模型如下。

vue 父子组件传值问题_第2张图片

使用子组件currentAreaInfo对象接收父组件传过来的areaInfo对象

问题:在切换省份时,城市显示的是默认的城市列表,地区也是一样

vue 父子组件传值问题_第3张图片vue 父子组件传值问题_第4张图片

解决方法:让父组件和接收其传过来的对象的子组件对象,结构保持一致。

究其原因,如果父组件缺少一些字段,即使将父组件传过来的对象直接赋值给子组件对象,缺失的字段没有set、get方法,就无法触发计算属性

vue 父子组件传值问题_第5张图片

你可能感兴趣的:(vue,计算属性,vue.js)