子组件属性挂载时未更新（）

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 属性似乎没有更新，因此"watch" 未触发。

什么会导致属性不更新？

Answer 1

正如解释的那样here：

HTML attributes are case-insensitive, so when using non-string templates, camelCased prop names need to use their kebab-case (hyphen-delimited) equivalents:

所以你的代码应该是：

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

子组件属性挂载时未更新（）

child component property not being updated when mounted()

vue.js

vue-component

vuejs2

子组件 属性 挂载时未更新（）

child component property not being updated when mounted()

vue.js

vue-component

vuejs2

子组件属性挂载时未更新（）