Vue学习

传参

1 父子组件间传递参数：
1）父->子：父中的字标签:xxx="yyy"，子中通过props:['xxx']取值。
2）子->父：子中**this.emit('xxx', val, ...)，组件二用bus.$on('xxx', function(val1, val2) {})接收。

methods，computed，watch区别

methods：方法，非响应式。
computed：计算属性，响应式。计算量小，无异步操作时。
watch：侦听。计算量大，执行可控，可进行异步操作。

递归组件时，name别忘写

export default {
    name: 'SidebarItem', // 递归时, name必须有  不然找不到该组件
    props: {
        item: {
            type: Object,
            required: true,
            default() {
                return {}
            }
        }
    }
}

没有name 报错
[Vue warn]: Unknown custom element: <sidebar-item> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

递归时，遇到if=false的时候，即终止本层递归。

计算属性 以下sidebar这种写法会导致死循环

computed: {
    ...mapState(["sidebar"]),
    sidebarOpened() {
      return this.sidebar.opened;
    }，
    // 以下这种写法会导致死循环
    sidebar() {
        return this.sidebar;
    }
  }

[Vue warn]: Error in render: "RangeError: Maximum call stack size exceeded"

导航菜单重复点击报错

导航菜单重复点击报错.png

在引入router文件中添加如下代码，问题解决。

// 点击一次 再点一次 错误信息
const originalPush = VueRouter.prototype.push;
VueRouter.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err);
};