Question

我对此感到困惑，因为我有另一个正常工作的简单组件，并且遵循与错误方案相同的风格。

我有一个组件alertBox：

var alertBox = {
template: '\
    <transition name="fade">\
      <div class="alert" :class="[status]">\
        {{ message }}\
        <button @click="close" type="button" class="close" aria-label="Close">\
          <span aria-hidden="true">&times;</span>\
        </button>\
      </div>\
    </transition>',
    props: {
      alertMessage: {
        type: String,
        required: true
      },
      alertStatus: {
        type: String,
        required: true
      }
    },
    data: function() {
      return {
        status: this.alertStatus,
        message: this.alertMessage
      };
    },
    methods: {
      close: function() {
        console.log('ran close')
        this.$emit('close-alert');
        this.crazyTest();
      },
      crazyTest: function() {
        console.log(this.alertStatus)
        console.log(this.alertMessage)
        console.log(this._props)
        console.log(this.$props)
        console.log(this._data)
        console.log(this.message)
        console.log(this.status)
      }
    }
}

哈哈无法忘记删除crazyTest方法！

alertBox用于两个区域，一次在父级上，一次在父级内的组件上。

在父级上，它具有数据绑定方式：：警报消息=＆＃34; alerts.createEngineerMessage＆＃34; ：警报状态=＆＃34; alerts.createEngineerStatus＆＃34;

在组件模板上是这样的：：alertMessage =＆＃34; alerts.createCompanyMessage＆＃34; ：alertStatus =＆＃34; alerts.createCompanyStatus＆＃34;

在用户操作之后的另一种方法中，在显示alertBox之前更新父级的警报对象中的数据。我的crazyTest方法确认了这一点，并显示使用组件中的新数据更新道具。但是，数据属性消息和状态不会更新。

所有值都是针对反应性而初始化的。

Answer 1

当组件被渲染时，您的数据已设置。这就是没有更新的原因。

要解决这个问题，你可以采取两种方式：

1）注意道具的变化并更新您的数据。

watch: {
    alertMessage: function (val) {
      this.data.message = val
    },
}

2）直接使用道具而不复制数据。

<transition name="fade">\
      <div class="alert" :class="[errorStatus]">\
        {{ errorMessage }}\
        <button @click="close" type="button" class="close" aria-label="Close">\
          <span aria-hidden="true">&times;</span>\
        </button>\
      </div>\
    </transition>'

更新道具时，Vue.js组件数据不会更新

1 个答案: