标签：his   segment   eth   问题   log   info   https   define   methods   

问题

在用vue开发时碰到父组件传值子组件时不能触发子组件的props里对应的值的default值。

父组件代码:

<template>
  <div>
   <TabOrderClaim
     :compData="companyInfo"
   ></TabOrderClaim>    
  </div>
</template>

<script>
import TabOrderClaim from ‘./child/tab-order-claim‘
export default {
  components: {
    TabOrderClaim,
  },
  data() {
    return {
      companyInfo: {},
      //公司信息
    }
  },
  computed: {},
  created() {
  },
  mounted() {},
  methods: {
  },
}
</script>

<style lang="scss" scoped>
</style>

子组件:

<template>
  <div>
     <div>
      <div>
        <div>
          <span>
            {{
              companyObject.data.taxname === ‘‘
                ? ‘[请填入营业执照公司全称]‘
                : companyObject.data.taxname
            }}
          </span>

          <span>
            {{
              companyObject.data.taxno === ‘‘
                ? ‘[请填入社会统一信用编码]‘
                : companyObject.data.taxno
            }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    compData: {
      type: Object,
      default: function() {
        return {
          code: 200,
          data: {
            taxname: ‘‘,
            taxno: ‘‘,
          },
          msg: ‘‘,
        }
      },
    },
  },
  data() {
    return {
      companyObject: this.compData,
      orderClaimInfo: false,
    }
  },
  computed: {},
  created() {},
  mounted() {},
  methods: {
  },
  watch: {
    compData(value) {
      console.log(value)
      this.companyObject = value
    },
  },
}
</script>

<style lang="scss" scoped>
</style>

解决方法

将父组件data return中的companyInfo修改为undefined,则子组件的props中对应的值的default生效。

data() {
    return {
      companyInfo: {},
      //公司信息
    }
  },

修改为

data() {
    return {
      companyInfo: undefined,
      //公司信息
    }
  },

原因

vue中认为 "" / {} 等是初始化值了,所以传入值触发不了default，同时 undefined 一般是不会认为设置值的

最后

十分感谢原博客博主,原博客地址: https://segmentfault.com/q/1010000014303135

vue父传子传值时子组件的props对应的值的default不能生效

标签：his   segment   eth   问题   log   info   https   define   methods   

原文地址：https://www.cnblogs.com/GoodMemoryBlog/p/14209454.html