Vue3 兄弟コンポーネントに値を渡すために mitt をインストールして使用する方法-Vue.js-php.cn

Vue3 兄弟コンポーネントに値を渡すために mitt をインストールして使用する方法

WBOY

リリース： 2023-06-01 19:22:04

転載

1984 人が閲覧しました

Vue インスタンス上の EventBus と比較して、mitt.js の利点は何ですか?

まず第一に、これは十分に小さく、わずか 200 バイトです。
次に、すべてのイベントの監視と一括削除をサポートしています。
また、Vue インスタンスに依存せず、フレームワーク間で使用でき、React や Vue、さらには jQuery プロジェクトでも同じライブラリのセットを使用できます。

プロジェクトに mitt をインストールする

npm install --save mitt

ログイン後にコピー

使用方法 1: プロトタイプで宣言

1. main.ts\color{ # ef2d26}{main.ts}main.ts に登録し、グローバル

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

ログイン後にコピー

2 にマウントします。ホームで Emit\color{#ef2d26}{emit}emit を使用します。情報を送信するには vue コンポーネント

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

ログイン後にコピー

2。情報を受信するには about.vue コンポーネントで on\color{#ef2d26}{on}on を使用します

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

ログイン後にコピー

使用方法 2: コンポーネントでの参照

1. 新しいbus.ts\color{#ef2d26}{bus.ts}bus.ts ファイルを作成します

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

ログイン後にコピー

2. home.vue コンポーネントに Emit\color{#ef2d26}{emit}emit を導入して使用し、情報を送信します

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

ログイン後にコピー

2. on\color を導入して使用します{# about.vue コンポーネント ef2d26}{on} 情報を受信します

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

ログイン後にコピー

以上がVue3 兄弟コンポーネントに値を渡すために mitt をインストールして使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。