Comment installer et utiliser Mitt pour transmettre la valeur dans le composant Brother Vue3-Voir.js-php.cn

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

WBOY

Libérer： 2023-06-01 19:22:04

avant

1983 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 &#39;vue&#39;
import App from &#39;./App.vue&#39;
import mitt from &#39;mitt&#39;
import router from "./router";

const app = createApp(App)

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

app.use(router).mount(&#39;#app&#39;)

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!