vue2 遇到的问题汇集ing-优快云博客

本文介绍Vue中子路由的配置方式及父组件向子组件传递数据的方法，并讨论了弹窗组件显示与隐藏的控制逻辑，同时提及了Vuex使用中可能遇到的问题及解决策略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1 、子路由

{
  path: '/order-list', //订单列表
  name: "order-list",
  component(resolve) {
    require.ensure(['../view/order/order-list.vue'], () => {
      resolve(require('../view/order/order-list.vue'));
    });
  },
  children: [{
    path: '/order-list/order-list-detail', //订单详情页
    name: "order-list-detail",
    component(resolve) {
      require.ensure(['../view/order/order-list-detail.vue'], () => {
        resolve(require('../view/order/order-list-detail.vue'));
      });
    },
  },]
},

path = 父路由 + 子路由名字

2、父组件往子组件传值（props）

1、子组件是弹出框隐藏显示

传值参数数据，判断true 和 false

条件：show 默认false

当点击按钮触发事件，使show设置true

子组件在展示代码：

 <v-pay-detail :paylist="payData" :show="show" @isshow="isshow_child" />

2、父组件接受数据

    data() {
      return {
        isshow: this.show
      }
    },
    replace: true,
    props: ['show', 'paylist'],

3、接受到show 通过监听赋值给isshow 为true 显示子组件

    watch: {
      show(val) {
        let vm = this;
        this.isshow = val;
        if (this.isshow) {
          vm.$nextTick(() => {
            new BScroll('#scroll_section', {
              deceleration: 0.001,
              bounce: true,
              swipeTime: 1800,
              click: true,
            });
          })
        }
      }
    },

4、当点击关闭时，子组件隐藏

isshow 设置false 同时必须让父组件的show 设置成false，就是把子组件的isshow = false 回传父组件

      closed() {
        this.isshow = false;
        this.$emit('isshow', this.isshow);
      },

5、@isshow="isshow_child" 触发isshow_child函数

      isshow_child(msg) {
        this.show = msg;
      },

总结子路由关闭一次，父组件也必须关闭一次。弹出框才正常显示，隐藏.

3、vuex 报错

Uncaught TypeError: Cannot read property 'id' of null
原因：
状态没有赋值 
数据嵌套深

4、

4、vue2 数据循环超过三级会有错误警告，这是哪里出问题了么？



解决方法 初始值要给videoList赋一个let videoList={'data':{list:[]}};

转载于:https://www.cnblogs.com/y896926473/p/6709053.html