Vue子组件修改props中的对象,父组件无法完成同步数据

在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中完成的。父组件依然是空对象{}
          }
      }
  })

这个问题目前还没有解决,如果有大佬解决了,希望能留言告诉我方法。

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页