在Vue中,如果父组件给子组件传的是数组或者对象这些引用类型,那么子组件可以通过props属性与父组件同步数据。
var vm = new Vue({
el: '#app',
data: {
// caseInfo
zhifarenyuan: {}, // 执法人员
weifainfo: {}, // 违法信息
weifainfolist: [], // 违法信息下拉列表
zhifarenyuanlist: [], // 执法人员下拉列表
// userInfo
car: {}, // 车辆
company: {}, // 公司
zhijiluanrenyuan: {}, // 人员
// siteinfo
siteinfo: {},
// askinfo
askinfo: {},
componentArr: ['caseInfo', 'userInfo', 'siteInfo', 'askInfo', 'finish'],
currViewIndex: 0,
},
父组件通过动态组件传值,注意如果props中是驼峰命名规则的话,如props: ['userInfo']
,那么在绑定属性的的时候,不能有大写字符,用中划线代替,如user-info
keep-alive可以缓存多个子组件的操作记录,保留输入信息等
<keep-alive>
<component :is="currViewComputed"
:zhifarenyuan="zhifarenyuan"
:weifainfo="weifainfo"
:weifainfolist="weifainfolist"
:zhifarenyuanlist="zhifarenyuanlist"
:car="car"
:company="company"
:zhijiluanrenyuan="zhijiluanrenyuan"
:siteinfo="siteinfo"
:askinfo="askinfo"
@caseinfotransportdata="caseInfoTransportData"
@userinfotransportdata="userInfoTransportData"
>
</component>
</keep-alive>
如果是基本类型,只能通过自定义事件去完成了,命名规则同上。
今天开发的时候遇到一个bug,虽然我在父组件中通过props给子组件传的是对象和数组,但在子组件中却依然与父组件同步不了数据,经过一系列的bug调试,我发现只要是我给props属性赋值的操作是在ajax中完成的,那么父组件将不会同步子组件的props值。
$.ajax({
url: '${ctx}/pc/laws/listFaguibianhao',
type: 'POST',
dataType: 'json',
async: false,
success: (res) => {
if (res.result !== null) {
this.weifainfolist = res.result; // 子组件props属性赋值是在ajax中完成的。父组件依然是空数组[]
}
}
});
$.ajax({
url: '${ctx}/pc/qualifications/getOwner',
type: 'POST',
dataType: 'json',
data: {yehumingcheng: yehumingcheng},
success: (res) => {
if (res.result !== null) {
this.company = res.result; // 子组件props属性赋值是在ajax中完成的。父组件依然是空对象{}
}
}
})
这个问题目前还没有解决,如果有大佬解决了,希望能留言告诉我方法。