Cara memasang dan menggunakan mitt untuk menghantar nilai dalam komponen saudara Vue3-View.js-php.cn

Cara memasang dan menggunakan mitt untuk menghantar nilai dalam komponen saudara Vue3

WBOY

Lepaskan： 2023-06-01 19:22:04

ke hadapan

1984 orang telah melayarinya

Berbanding dengan kejadian EventBus pada Vue, bagaimanakah mitt.js lebih baik?

Pertama sekali, ia cukup kecil, hanya 200bait.
Kedua, ia menyokong pemantauan semua acara dan penyingkiran kelompok.
Ia juga tidak bergantung pada contoh Vue dan boleh digunakan merentas rangka kerja atau Vue, malah projek jQuery boleh menggunakan set perpustakaan yang sama.

Pasang sarung tangan dalam projek

npm install --save mitt

Salin selepas log masuk

Kaedah penggunaan 1: Isytihar dalam prototaip

1 } Daftar dalam {main.ts}main.ts dan lekapkannya ke

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;)

Salin selepas log masuk

global 2. Gunakan emitcolor{#ef2d26}{emit}emit dalam komponen home.vue untuk menghantar maklumat

<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>

Salin selepas log masuk

2 Gunakan oncolor{#ef2d26}{on}on dalam komponen about.vue untuk menerima maklumat

<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>

Salin selepas log masuk

Kaedah penggunaan dua: rujukan dalam komponen

1 Cipta fail bas.tscolor{#ef2d26}{bus.ts}bus.ts

import mitt from "mitt";
const emiter = mitt();
export default emiter;

Salin selepas log masuk

2 gunakannya dalam komponen home.vue emitcolor{#ef2d26}{emit}emit menghantar maklumat

<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>

Salin selepas log masuk

2. Perkenalkan dan gunakan oncolor{#ef2d26}{on}on dalam about.vue komponen untuk menerima maklumat

<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>

Salin selepas log masuk

Atas ialah kandungan terperinci Cara memasang dan menggunakan mitt untuk menghantar nilai dalam komponen saudara Vue3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!