接收到父组件传来的prop，子组件调用报undefined错误

Question

script代码如下

  export default {
    name: 'RouteCard',
    props: ['orderProp'],
    data() {
      return {
        order: this.orderProp,
        show: true
      };
    },
    onLoad() {
      this.height = uni.getSystemInfoSync().windowHeight;
    },
    methods: {
      tabChange(val) {
        this.currentTab = val.tab;
        this.currentComponent = this.componentList[this.currentTab];
      },
      checkDetial(val) {
        console.log(val)
      }
    },
    watch: {
      // 无法监控到变化
      order: {
        deep:true,
        handler: function(newVal, oldVal) {
          this.show = false
          console.log('newValue', newVal);
          console.log('oldValue', oldVal);
        }
      }
    }
  };

每次启动该组件，都会报错
这行错误指向的是红色框的代码,
此处我使用的是uni-app框架，不了解的朋友可以吧 view标签 当做 div标签 ~~~~

蓝色框代码不会报错。

我希望不会再报 name of undefine 这样的错误，我应该怎么修改？
我的设想是，监听order的变化（父组件传来的值赋值给order），值变化的时候，将show设置为true，但是监听不到prop的变化。~~~~

Answer 1

1. 你如果想监听父组件传的值，这里应该监听 orderProp

   export default {
     name: 'RouteCard',
     props: {
       orderProp: {
         type: Object,
         default: () => ({}),
       },
     },
     data() {
       return {
         order: this.orderProp,
         show: true,
       };
     },
     computed: {
       order() {},
     },
     onLoad() {
       this.height = uni.getSystemInfoSync().windowHeight;
     },
     methods: {
       tabChange(val) {
         this.currentTab = val.tab;
         this.currentComponent = this.componentList[this.currentTab];
       },
       checkDetial(val) {
         console.log(val);
       },
     },
     watch: {
       // 无法监控到变化
       orderProp: {
         deep: true,
         handler: function(newVal, oldVal) {
           this.show = false;
           this.order = newVal;
           console.log('newValue', newVal);
           console.log('oldValue', oldVal);
         },
       },
     },
   };

2. 渲染 name 那个可以改成:

   order.driver && order.driver.name

Answer 2

1.报错可以通过v-if限制，有值显示。
2.order是orderProp赋值过来的，他们并不是双向绑定的，order数据没变化，所以无法触发监听。你可以尝试监听orderProp，如果不行的话建议你使用vuex，全局注册用于组件之间的数据共享。