Plug-in de communication de composants Vue personnalisé utilisant Mixin pour écrire des plug-ins

Cet article présente principalement le plug-in de communication du composant Vue fait maison utilisant mixin pour écrire des plug-ins. Il a une certaine valeur de référence. Maintenant, je le partage avec tout le monde. Les amis dans le besoin peuvent s'y référer.

Bien que ce projet soit szpoppy C'est un projet personnel, mais il est largement utilisé dans la société szpoppy et a toujours été maintenu par szpoppy. J'ai personnellement travaillé avec szpoppy pendant près d'un an, je regarde souvent son code source et j'apprends. beaucoup de lui.

La structure de cet article :

• 1. Comparaison avec VUEX

• 2. le plug-in a déjà des fonctions

• 3. Comment utiliser le plug-in

• 4. >

  5. Utilisation spécifique

• 6. Analyse du code source, vous apprend à utiliser mixin pour écrire le plug-in vue (vous pouvez le comprendre en un coup d'œil, facile à comprendre). )

• 1. Comparez la syntaxe VUEX

• Si vous dites vuex Il crée un entrepôt de données en dehors de l'arborescence des composants de la couche de vue et le modifie via Mutaion, puis Unicom crée un pipeline entre les composants, ce qui permet ; composants pour transmettre et distribuer des données via des fonctions, et contrairement à VUEX, il s'agit de nombreuses syntaxes

• VUEX fait principalement la gestion de l'état, tandis que 'vue-unicom' est purement pour un à un et communication de composants un à plusieurs

• Le code source de « vue-unicom » ne fait que plus de 200 lignes, avec des commentaires clairs. Les utilisateurs peuvent avoir une compréhension plus approfondie de la façon d'écrire des composants vue, ce qui facilitera la création ultérieure de leurs propres plug-ins

• Si vous n'êtes pas sûr de vouloir utiliser vuex, ne l'utilisez pas. Vous n'avez pas besoin de l'utiliser. vuex pour le plaisir d'utiliser vuex. Sachez simplement comment l'utiliser. Ne démarrez pas un projet de petite et moyenne taille et utilisez simplement vuex directement. FamilyMart ajoute encore beaucoup de syntaxe spécifique et d'unicom. il peut pleinement supporter l'ampleur d'applications telles que le
Système d'achat de billets de train
• .

2. Les fonctions existantes

• Tout composant Vue envoie des instructions à tous les autres composants

• Tout composant Vue envoie des instructions à un groupe de composants Vue ; >
Tout composant Vue envoie un message à un composant d'identifiant spécifique
Obtient une liste de composants dans n'importe quel composant Vue
Obtenez un composant d'identification spécifique dans n'importe quel composant Vue ;
Envoyez des instructions aux composants qui n'ont pas encore été initialisés
Envoyez des instructions au groupe ; composant qui n'a pas encore été initialisé ;
Envoyer des instructions au composant id qui n'a pas encore été initialisé
3.
4.démonstration de démonstration

Pour plus de détails, visitez l'adresse readme de ce github

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'
})

// 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.2 Enregistrez un groupe au sein d'un composant

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

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

        }
    }
}

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

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

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

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

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

# id1 (Obtenir le composant spécifié)

5.8 Instructions d'envoi différé (instructions uniques)

L'utilisation des instructions ~ commence par

~instruct1 (L'instruction est retardée jusqu'à ce que le composant contenant l'instruction instruct1 apparaisse)

~instruct1@group (L'instruction est retardée jusqu'à ce que le nom du groupe apparaisse) composant)

~instruct1#id1 (L'instruction est retardée jusqu'à ce que le composant nommé id1 apparaît)

Utilisation de la surveillance des composants, utilisation des instructions~ Depuis le début, le deuxième paramètre est le rappel

～@group (à l'écoute du apparence du composant nommé group)

～#id1 (à l'écoute de l'apparence du composant nommé id1)

～ (à l'écoute de tout nouveau composant)

n'effectue qu'une analyse de base du code source. Pour plus de détails, vous pouvez consulter szpoppy

6.1 Utiliser ximin comme plug-in et prototype Définir les fonctions globales (l'objectif du plug-in). dans le mécanisme)

Ensuite, nous nous concentrerons sur l'installation d'entrée, et importerons également le plug-in et le processus app.use. , la première étape est en fait d'appeler la fonction install

En fait, selon cette division, vous pouvez facilement voir que la partie production de ce plug-in est grossièrement divisée dans ceci Quelques morceaux :

6.1.1 prototype

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

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!