关于javascript:vuecompsmanager-解决你的组件管理和keepalive引起的缓存问题

vue-comps-manager

为你的我的项目减少更灵便的钩子函数，把组件零碎变得可治理

作为一个前端小学生 心愿各位大大点颗星星激励

GitHub：https://github.com/allensunjian/vue-components-manager

实用于 vue 我的项目开发的单页利用。

解决的问题：
1 组件 / 组件层级过深导致的传值繁琐问题
2 应用 keep-alive 组件导致不能及时更新的问题

长处：
1 减少 onshow/onleave 钩子，不受 keep-alive 组件的缓存影响。
2 能够提供的 API 不便的拿到任何（已注册）的组件。
3 缩小了多层嵌套组件导致的空间复杂度

注意事项：
1 须要配合 vue-router 应用

装置

 npm install vue-comps-manager --save--dev

配置 main.js

import router from '@/router/index'
import CompMan from "vue-comps-manager";

CompMan(router)

以上根本配置曾经实现

开始配置页面：onshow/onleave

onshow/onleave 钩子配置在 页面的根对象上；
成果：

• 当路由跳转到该组件会执行 onshow, 并带回跳转的参数
• 当路由从一个组件来到到另一个组件会执行 onleave 并去向带回到参数中

  a.vue

export default {
   name: "a",  // 这里必须配置
   onshow: function (query) {},
   onhide: function (toPath) {}}
// 如果页面不须要 onshow/onhide 钩子那么就无需配置。

配置全局响应函数（路由发生变化即执行）

留神：
1 name 属性是必须的须要依附该字段 与组件建设映射关系
App.Vue

export default {
    name: "app"
    methods: {compManGOL () {
            return {a () {},
                b () {},
                c () {}
            }
        }
    }
}

“compManGOL” 是默认的全局钩子配置办法，把想在路由变动即触发的函数放在其中。即可，同时执行 a,b,c …. 函数

如果你感觉 “compManGOL” 这个名字 你不喜爱，那么持续看到最初 他也是可配置的

组件配置：

在每个想要治理的组件配置响应的名字即可
如：
a.vue

export default {name: "a"}

b.vue

export default {name: "b"}

获取组件：

// 在任意的组件中：this.$lib_get("a") // 即可获取 a 组件
this.$lib_get("b") // 获取 b 组件

个性化配置

提供.config 办法实现个性化的配置
目前提供两个配置项：
1 root 作为组件的根节点能够不仅仅叫 app 能够叫任意你感觉好听的名字（默认 : app）
2 methodsLibName 全局响应函数的仓库 指定一个名称（默认：compManGOL）

import router from '@/router/index' 
import CompMan from "vue-comps-manager";

CompMan(router).config({root: "xxxxPage",methodsLibName: "xxxxOpts"});