Vue子组件Props数据不更新问题技术求助

嗨，我来帮你搞定这个Props同步的问题～

你遇到的情况其实很典型：当你把父组件传递的testData赋值给子组件data里的val时，这个赋值只会在组件初始化创建的时候执行一次。之后父组件更新testData，子组件的val不会自动跟着变——因为data里的属性并不会主动监听props的变化。而你直接用{{testData}}能正常同步，是因为Vue的props本身就是响应式的，Vue会自动追踪它的更新并重新渲染。

这里给你几个靠谱的解决办法：

方法1：直接使用Props（最推荐） #

如果不需要对传递的数据做额外处理，直接在模板里用props的字段就好，这是最简洁符合Vue设计的方式：

Vue.component('child-component', {
  template: '<div class="child">{{testData}}</div>',
  props: ['testData']
});

方法2：用计算属性替代Data #

如果需要对testData做格式化、转换之类的处理，用计算属性就最合适了——计算属性会自动依赖props的变化，实时更新结果：

Vue.component('child-component', {
  template: '<div class="child">{{val}}</div>',
  props: ['testData'],
  computed: {
    val() {
      // 这里可以加自定义处理逻辑，比如格式化字符串
      // return this.testData.trim()
      return this.testData;
    }
  }
});

方法3：监听Props变化手动更新Data #

如果确实需要把数据存在子组件的data里（比如要在子组件内部修改这个值，不过注意：不要直接修改props，建议通过$emit通知父组件更新），可以用watch监听props的变化，手动更新data：

Vue.component('child-component', {
  template: '<div class="child">{{val}}</div>',
  props: ['testData'],
  data() {
    return {
      val: this.testData
    };
  },
  watch: {
    testData(newVal) {
      this.val = newVal;
    }
  }
});

总的来说，优先选前两种方法，既能保证响应式同步，又能避免手动监听的繁琐～

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