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