Maison > interface Web > Voir.js > le corps du texte

Comment installer et utiliser Mitt pour transmettre la valeur dans le composant Brother Vue3

WBOY
Libérer: 2023-06-01 19:22:04
avant
2060 Les gens l'ont consulté

Par rapport à EventBus sur les instances Vue, en quoi mitt.js est-il meilleur ?

  • Tout d’abord, il est assez petit, seulement 200 octets.

  • Deuxièmement, il prend en charge la surveillance de tous les événements et la suppression des lots.

  • Il ne repose pas non plus sur les instances Vue et peut être utilisé dans tous les frameworks React ou Vue, et même les projets jQuery peuvent utiliser le même ensemble de bibliothèques.

Installez mitt dans le projet

npm install --save mitt
Copier après la connexion

Méthode d'utilisation 1 : déclarez dans le prototype

1 Enregistrez-le et montez-le sur le

import { createApp } from 'vue'
import App from './App.vue'
import mitt from 'mitt'
import router from "./router";

const app = createApp(App)

// vue3挂载到全局
app.config.globalProperties.$mitt = mitt();

app.use(router).mount('#app')
Copier après la connexion

global dans main.tscolor{#ef2d26}{main.ts}main. .ts 2. Utilisez submitcolor{#ef2d26}{emit}emit dans le composant home.vue pour envoyer des informations

<template>
    <div class="home-container">
        <p>这里是home组件</p>
        <button @click="sendMitt">$mitt发送数据</button>
        <About></About>
    </div>
</template>

<script lang="ts" setup>
import { getCurrentInstance, ref, ComponentInternalInstance } from &#39;vue&#39;;
import About from &#39;../about/about.vue&#39;

const { appContext } = getCurrentInstance() as ComponentInternalInstance;
const money = ref<number>(98);

const sendMitt = () => {
    appContext.config.globalProperties.$mitt.emit(&#39;moneyEvent&#39;, money.value += 2);
}

</script>

<style lang="less">
</style>
Copier après la connexion

2. Utilisez oncolor{#ef2d26}{on}on dans le composant about.vue pour recevoir des informations.

<template>
    <div class="about-container">
        <p>这里是about组件</p>
        <p>接收到的数据:{{ amount }}</p>
    </div>
</template>

<script lang="ts" setup>
import { ref, getCurrentInstance, ComponentInternalInstance, onBeforeMount, onMounted } from &#39;vue&#39;;

const amount = ref(0);
const { appContext } = getCurrentInstance() as ComponentInternalInstance;

onMounted(() => {
    appContext.config.globalProperties.$mitt.on(&#39;moneyEvent&#39;, (res: number) => {
        amount.value = res;
    })
})

onBeforeMount(() => {
    appContext.config.globalProperties.$mitt.off(&#39;moneyEvent&#39;);
});

</script>

<style lang="less">
.about-container {
    background-color: #f0f0f0;
}
</style>
Copier après la connexion

Deuxième méthode d'utilisation : référence dans le composant

1. Créez un nouveau fichier bus.tscolor{#ef2d26}{bus.ts}bus.ts

import mitt from "mitt";
const emiter = mitt();
export default emiter;
Copier après la connexion

2. Introduisez et utilisez submitcolor{#ef2d26 dans le composant home.vue }{emit}emit envoie des informations

<template>
    <div class="home-container">
        <p>这里是home组件</p>
        <button @click="sendMitt">$mitt发送数据</button>
        <About></About>
    </div>
</template>

<script lang="ts" setup>
import { ref } from &#39;vue&#39;;
import About from &#39;../about/about.vue&#39;
import emitter from &#39;../../utils/bus&#39;

const money = ref<number>(98);

const sendMitt = () => {
    emitter.emit(&#39;moneyEvent&#39;, money.value += 2);
}
</script>

<style lang="less">
</style>
Copier après la connexion

2 Introduisez et utilisez oncolor{#ef2d26}{on}on dans le composant about.vue pour recevoir des informations

<template>
    <div class="about-container">
        <p>这里是about组件</p>
        <p>接收到的数据:{{ amount }}</p>
    </div>
</template>

<script lang="ts" setup>
import { ref, onBeforeMount, onMounted } from &#39;vue&#39;;
import emitter from &#39;../../utils/bus&#39;

const amount = ref(0);

onMounted(() => {
    emitter.on(&#39;moneyEvent&#39;, (res: any) => {
        amount.value = res;
    });
})

onBeforeMount(() => {
    emitter.off(&#39;moneyEvent&#39;);
});

</script>

<style lang="less">
.about-container {
    background-color: #f0f0f0;
}
</style>
Copier après la connexion
.

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!

Étiquettes associées:
source:yisu.com
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal