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

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);
        }
      }
    }
  };

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

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

阅读 603
评论
    2 个回答
    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

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

        撰写回答

        登录后参与交流、获取后续更新提醒