mixinを使ってプラグインを書く自作vueコンポーネント通信プラグイン

この記事では主に、自作の vue コンポーネント通信プラグインのプラグインを作成するための mixin の使用方法を紹介します。 szpoppy は szpoppy の個人的なプロジェクトであり、社内で広く使用されており、常に szpoppy によって保守されています。私は 1 年近く szpoppy と仕事をしてきましたが、よく彼のソース コードを見て、彼から多くのことを学びました。

この記事の構成:

1. VUEXとの比較
2. プラグインの使い方
4. デモデモ
5. 具体的な使用方法
6. ソースコード解析、Vueプラグインの書き方をmixinを使って教えます(一目でわかる、わかりやすい)
1. VUEX を比較します
「vue-unicom」構文は直感的で使いやすいです。このプラグインは基本的に学習コストがかからず、プロジェクトを大幅に簡素化できます

vuex が外部にデータ ウェアハウスを作成する場合。レイヤーコンポーネントツリーを表示し、Mutaion を通じてそれを変更します。次に、unicom がコンポーネント間にデータウェアハウスを構築します。パイプを使用すると、コンポーネントは関数を通じてデータを渡したり配布したりできますが、VUEX ほど多くの構文はありません
VUEX は主に状態管理を行います。 vue-unicom' は純粋に 1 対 1 および 1 対多のコンポーネント通信用です
'vue-unicom' のソース コードはわずか 200 行で、ユーザーはその方法をより深く理解できます。 vue コンポーネントを作成します。これは、将来独自のプラグインを作成するときに便利です。何をしたいかわからない場合は、vuex を使用しないでください。 vuex は、vuex を使用するためだけに使用してください。FamilyBucket は、パフォーマンスと実践の観点から、より具体的な構文を追加することができます。
• 電車の切符購入システム

  などの規模のアプリケーションに十分対応します。

2. 既存の関数

• は、任意の 2 つの Vue コンポーネント間で通信の問題を引き起こします。 Vue コンポーネントの特定のグループ

任意の Vue コンポーネントは特定の ID コンポーネントにメッセージを送信します。

任意の Vue コンポーネント内のコンポーネントのリストを取得します。特定の ID コンポーネント;

• まだ初期化されていないコンポーネントに命令を送信します。

• まだ初期化されていないコンポーネントに命令を送信します。 ;

• 3. 使い方

npm install vue-unicom

import VueUnicom from 'vue-unicom'
// 非 cli 也必须 install一下
Vue.use(VueUnicom, {
    // 制定名称， 默认为 unicom
    unicom: 'unicom'，
    // 定制分组使用名称 默认为 unicom + 'Name'
    unicomName: 'unicomName',
    // 定制id使用名称 默认为 unicom + 'Id'
    unicomId: 'unicomId'
})

4. デモデモ

詳しくは、このgithubのreadmeアドレスをご覧ください

コンポーネントの記述例は以下の通りです

// 1. 下载
git clone https://github.com/szpoppy/vue-unicom.git

// 2. 
cd vue-unicom

//3.运行demo，可以直接打开src目录下的index.html(推荐这种更方便的方法)也可以用gulp运行

// 4.‘vue-unicom’源代码在‘/src/lib/unicom.js’

コンポーネントの呼び出し例は以下の通りです

    Vue.component('ca', {
    template: '<p></p><p>text:{{text}}#{{unicomId}}</p><p>msg: {{msg}}</p>',
    unicomName: 'a',
    unicom: {
        message: function(sender, text){
            this.msg = text
        }
    },
    data: function(){
        return {
            text: 'component - ca',
            msg: 'a'
        }
    },
    mounted(){
        console.log(' a component  ',this)
    }
})

5.1 指示を受け取るために登録します

    <p>
        <ca></ca>
        <ca></ca>
        <cb1></cb1>
        <cb2></cb2>
        <cc></cc>
        </p><hr>
        <cbtn></cbtn>
    

5.2 コンポーネント内にグループを登録します

{
    // Vue中增加 增加unicom参数
    // 这里的unicom，指 上面传入的参数
    unicom: {
        // instruct1：通讯指令
        // sender：发送指令者（$vm）
        // args：指令发出者附带参数
        // 参数如果为对象，是引用类型，如果需要设置，请深度克隆一遍
        instruct1 (sender, ...args) {
            // .... this 为当前组件
        },
        instruct2 (sender, ...args) {

        }
    }
}

5.3 コンポーネントが複数のグループに参加します

{
    // Vue中增加 增加unicomName参数
    // 指定分组 属于 group， 所有实例，都属于这个分组
    unicomName: 'group'
}

5.4 コンポーネントグループをインスタンスに追加します

{
    // 组件可以加入多个分组
    unicomName: ['group1'， 'group2']
}

5.5指定するインスタンス内の unicomId

<!-- 加入group分组 -->
<component></component>

5.6 コンポーネント内で命令を送信

<!-- 指定$vm的 id 为 id1 -->
<component></component>

5.7 命令の高度な使用法

instruct1@group (指定されたグループに送信)

instruct1#id1 (指定されたコンポーネントに送信)

@group (指定されたコンポーネントを取得)グループコンポーネント)

#id1 (指定コンポーネントの取得)

5.8 命令の遅延送信(ワンタイム命令) コマンド使用~

~instruct1から開始(instruct1命令を含むコンポーネントが出現するまで命令を遅延させる) )

~instruct1@group (group という名前のコンポーネントが表示されるまで命令が遅延します)

~instruct1#id1 (id1 という名前のコンポーネントが表示されるまで命令が遅延します)

5.9 コンポーネントモニタリング

コンポーネントモニタリングを使用すると、命令が開始されます~ の場合、2 番目のパラメータは callback

~@group (リスニンググループの名前付けグループコンポーネントが表示されます)

~#id1 using using using using ' s ' use 's ' using ' s ‐ ‐ ‐ ‐ ‐ (外観の監視) id1 という名前のコンポーネントの)

~

6.1 ximin をプラグインとして使用し、プロトタイプはグローバル関数 (プラグイン メカニズムの焦点) を定義します

最初に vue プラグイン メカニズムを読むことをお勧めします https: //cn.vuejs.org/v2/guide/plugins.html

ソース コード 'unicom .js' を取得します。最初のステップは、コンパイラーを使用して、インストール関数を除くすべてのメソッドを収集することです

次に、入り口のインストールに焦点を当て、プラグインと app.use をインポートするプロセスで、最初のステップです。実際、それは

{
    methods:{
        method1 () {
            // 发送 instruct1 指令，参数为 1， 2
            this.$unicom('instruct1', 1, 2)
        }
    }
}

と呼ばれるインストール機能です。実際、この部門によれば、次のことが簡単にわかります。このプラグインの制作部分は大きく次の部分に分かれています:

6.1.1 prototype

利用vue原型链挂载一个全局的‘$unicom’方法，可以在全局内调用，也可以作为组件内节点click时的方法，click直接发送数据

<button>发送指令 message</button>     
<button>发送指令 message@a</button>

methods:{
      sendData(){
          this.$unicom('message@c', '测试数据')
      }
},

6.1.2 全局混入mixin

如不了解，建议阅读https://cn.vuejs.org/v2/guide/mixins.html
插件逻辑处理的重点部分：全局混入mixin
props：这个部分非常简单，就是为了让每个组件都能在组件调用时传递变量‘unicom-id’或者‘unicom-name’（一般是静态变量）
watch：这个部分主要就是当组件调用时‘unicom-id’或者‘unicom-name’传递过来的是动态变量对其进行实时监听
beforeCreate：在组件已解析但未加载时，利用‘this.$options’去获取自定义‘unicom’属性，然后在每一个组件内加入事件机制；最后利用Map集合以组件vm作为key，将该组件的分组和通信函数合并的对象作为value存起来
created：在组件已经解析和载入到dom结构之后，从Map集合中获取当前组件的分组和通信函数信息，判断是否有其它组件在当前组件未创建之前给它发送了数据，如果有，响应该延迟发送的数据
destroyed：组件销毁逻辑

6.1.3 自定义属性的混合策略optionMergeStrategies

如不了解，建议阅读vue中的optionMergeStrategies
这个部分看起来简单的几行，其实却是个插件开发过程中比较重点的部分
如何理解这个‘optionMergeStrategies’呢？该组件主要针对自定义option属性的混合；官方解释是：’当组件和混入对象含有同名选项时，这些选项将以恰当的方式混合‘。
肯定很多人还是不明白，其实说实话我也不算明白，但是我简单解释一下：

1. 这个东西具体的使用你其实可以仔细的看看vuex对这个的使用和‘vue-unicom’中optionMergeStrategies的使用

2. 官网的这句‘当组件和混入对象含有同名选项时，这些选项将以恰当的方式混合’是很透彻的在讲这个东西的概念

3. 在‘vue-unicom’插件中optionMergeStrategies有两个用处，一般情况下主要是将‘unicom-id’和‘vue-unicom’从原本数据格式变成数组；但是，如果当前组件或者vue全局被混入了和我们插件自定义option属性同名的变量，默认的合并策略是后面定义的option属性覆盖前面的，但是我们这里对合并策略进行了重写，就可以保证当前组件上所有的‘unicom-id’或者‘vue-unicom’属性都被push到一个数组中并挂载在当前组件上

简单理解它在当前插件的作用：子组件和上层组件有相同option属性时，让子组件正确合并上层组件的自定义属性

6.2 为什么可以在组件上直接写‘unicomName’、‘unicom’

我们可以很肯定一点：vue本身并没有这两个option属性，甚至很可能很多人也从来没有自己在组件声明时自定义options属性
如果你没有试过，也没有关系，看了本篇文章之后你就知道了
为什么我们要自定义option属性呢？这两个属性的作用很明确，‘unicomName’是做分组声明的，‘unicom’是做通信函数的；然后在mixin的各个声明周期再利用‘this.$options’获取自定义option属性进行进一步的逻辑处理，并声明optionMergeStrategies合并策略

6.3 当前组件的一个亮点

利用map集合以组件vm为单位存储该组件的分组和通信函数
每次存通信函数、分组的时候都会把对应的vm示例存储下来，所以要找通信函数或者对应分组就非常简单

这个组件较我一开始使用已经经过了一次对代码更加直观的改进，个人觉得非常值得大家阅读和使用

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

Vue活动创建项目之路由设计及导航栏的开发

Vue源码之文件结构与运行机制

以上がmixinを使ってプラグインを書く自作vueコンポーネント通信プラグインの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。