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属性似乎不会更新，因此＆＃34;钟表＆＃34;没有被触发。

什么会导致财产无法更新？

Answer 1

正如here所说：

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

所以你的代码应该是：

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

mount（）时未更新子组件属性

1 个答案: