vue-comps-managerはあなたのコンポーネントの管理とkeep-alive引き起こすキャッシュの問題を解決します.

2303 ワード

javascript vue.js 先端

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

メールの設定

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属性は、このフィールドとコンポーネントとのマッピング関係を確立する必要があります.

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

「compManGOL」は、デフォルトのグローバルフック構成方法であり、ルーティングの変化でトリガしたい関数をここに置く.はい、a、b、c…関数を同時に実行します.
「compManGOL」という名前が気に入らないなら、最後まで見続けても配置可能です.
コンポーネントの設定:
管理したいコンポーネントごとに応答の名前を設定すればいいです.

export default {
    name: "a"
}

b.vue

export default {
    name: "b"
}

コンポーネントを取得:

//       ：
this.$lib_get("a") //     a  
this.$lib_get("b") //   b

個人化の設定
提供.config方法は、個人化された構成を実現するために、現在は2つの構成項目を提供しています.1 rootはコンポーネントのルートノードとして、appというだけでなく、任意の名前でもいいです.(デフォルト:app)2 methods LibNameグローバル応答関数の倉庫に名前を指定します.

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

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

MySQLインストール(バイナリインストールモード)