mount() 时子组件属性未更新

Question

我在父组件中有以下标记

....
<div class="container-fluid">
          <claims :userID="userId"></claims>
          <claimForm :claimID="claimId" v-if="isDistributor"></claimForm>
          </div>
        </div>
      </div>
      <div class="col-lg-6">
        <div class="row">
          <display :claimID="claimId"></display>

 ...........
 data(){ return { claimId: null } },
 beforeMount(){
        this.userId = this.isDistributor? this.currentUser.id: null

        this.eventEmitter.$on('claim.details', function(id) {
          this.claimId = id
        })
      }

然后在称为<display>的子组件中

, watch: {
      .....
      claimID: function(n) {
        console.log('claim');
        if(n == null) return false

        this.getClaimById()
      }
    .....

当事件总线this.eventEmitter.$emit() 被发射时，父组件数据claimdId 被更新但是子组件的claimID 属性似乎没有被更新，因此“监视”没有被触发。

什么会导致属性不更新？

Answer 1

正如here解释的那样：

HTML 属性不区分大小写，因此在使用非字符串模板时，camelCased 的道具名称需要使用它们的 kebab-case（连字符分隔）等效项：

所以你的代码应该是：

<claimForm :claim-iD="claimId" v-if="isDistributor"></claimForm>