Vue组件mounted钩子函数中无法访问props的问题排查

兄弟，我之前也碰到过一模一样的情况！大概率是你的landing数据是异步加载的（比如通过接口请求获取），导致子组件执行mounted钩子的时候，父组件的landing还没拿到值，所以子组件的props自然是undefined或者初始空值。

给你两个最常用的解决方案：

方案一：用watch监听props变化 #

因为Vue的props是响应式的，我们可以监听props的更新，当数据真正到来时再执行逻辑：

vue.component('vue-date-selector-comp', {
  props: ['publishedat', 'cr'],
  template: '<div class="vue-date-selector-comp-cont">{{cr}}</div>',
  mounted: function() {
    // 先判断初始是否已有数据
    if (this.publishedat && this.cr) {
      this.processDateData();
    }
  },
  watch: {
    // 监听publishedat变化
    publishedat(newVal) {
      if (newVal && this.cr) {
        this.processDateData();
      }
    },
    // 监听cr变化
    cr(newVal) {
      if (newVal && this.publishedat) {
        this.processDateData();
      }
    }
  },
  methods: {
    processDateData() {
      console.log('publishedat1', this.publishedat);
      console.log('created2', this.cr);
      // 这里写你需要执行的业务逻辑
    }
  }
})

方案二：父组件中用v-if控制子组件渲染 #

确保landing数据加载完成后，再渲染子组件，这样子组件mounted时props就已经有值了：

{{landing}} 
<vue-date-selector-comp 
  v-if="landing" <!-- 只有landing存在时才渲染子组件 -->
  v-bind:publishedat="landing.published_at" 
  v-bind:cr="landing.created"
></vue-date-selector-comp>

另外你可以先排查下父组件的landing初始值：如果父组件data里landing初始是null或{}，那landing.published_at一开始就是undefined，也会导致子组件mounted时拿不到数据。

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