Vue.js中通过Prop数组将自定义事件传递回子组件的问题

我瞅了下你的代码，问题出在两个地方——根组件更新数据的逻辑不对，还有子组件没响应prop的变化。咱们一步步来修复：

1. 修正根组件的更新逻辑 #

你在根组件的upDateTime方法里写了this.currentDT = update，但根组件的data里根本没有currentDT这个变量！你的时间数据存在barData[0].currentDT里，得更新这个值才行：

// 根组件的methods部分
methods: {
  upDateTime: function (update){
    // 直接更新barData数组对象里的currentDT字段
    this.barData[0].currentDT = update;
  }
}

2. 让子组件响应prop的变化 #

子组件的currentTime是在data里初始化的，但data只会在组件创建时赋值一次，之后barData变化了，currentTime不会自动同步。这里有两种简单的解决办法：

办法一：用计算属性替代data变量

直接把currentTime改成计算属性，它会自动依赖barData的变化同步更新：

// 子组件的script部分，删掉data里的currentTime，换成computed
export default {
  props: { barData: Array },
  data() {
    return {
      callNow: this.barData[0].callNow,
    }
  },
  computed: {
    currentTime() {
      return this.barData[0].currentDT;
    }
  },
  // 原有的methods保留
  methods: {
    update: function () {
      const today = new Date();
      const date = today.getFullYear() + '-' + (today.getMonth() + 1) + '-' + today.getDate();
      const time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
      const dateTime = date + ' ' + time;
      this.$emit('newDateTime', dateTime)
    }
  },
}

办法二：监听barData的变化手动更新

如果一定要用data里的变量，可以添加一个深度监听器：

// 子组件的script部分
export default {
  props: { barData: Array },
  data() {
    return {
      callNow: this.barData[0].callNow,
      currentTime: this.barData[0].currentDT,
    }
  },
  watch: {
    barData: {
      deep: true, // 因为是嵌套的数组对象，需要开启深度监听
      handler(newVal) {
        this.currentTime = newVal[0].currentDT;
        this.callNow = newVal[0].callNow; // 如果callNow后续也需要更新的话
      }
    }
  },
  // 原有的methods保留
  methods: { /* ... */ }
}

另外提个小细节：你子组件的template里多了一个多余的</div>，记得删掉，避免DOM结构异常。

这样改完之后，点击按钮触发自定义事件，根组件更新barData，子组件就能同步显示最新的时间啦！

内容的提问来源于stack exchange，提问作者timv