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:[]}};