ホームページ >ウェブフロントエンド >Vue.js >Vue3 兄弟コンポーネントに値を渡すために mitt をインストールして使用する方法
まず第一に、これは十分に小さく、わずか 200 バイトです。
次に、すべてのイベントの監視と一括削除をサポートしています。
また、Vue インスタンスに依存せず、フレームワーク間で使用でき、React や Vue、さらには jQuery プロジェクトでも同じライブラリのセットを使用できます。
npm install --save mitt
1. main.ts\color{ # ef2d26}{main.ts}main.ts に登録し、グローバル
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')
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 'vue'; import About from '../about/about.vue' const { appContext } = getCurrentInstance() as ComponentInternalInstance; const money = ref<number>(98); const sendMitt = () => { appContext.config.globalProperties.$mitt.emit('moneyEvent', 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 'vue'; const amount = ref(0); const { appContext } = getCurrentInstance() as ComponentInternalInstance; onMounted(() => { appContext.config.globalProperties.$mitt.on('moneyEvent', (res: number) => { amount.value = res; }) }) onBeforeMount(() => { appContext.config.globalProperties.$mitt.off('moneyEvent'); }); </script> <style lang="less"> .about-container { background-color: #f0f0f0; } </style>
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 'vue'; import About from '../about/about.vue' import emitter from '../../utils/bus' const money = ref<number>(98); const sendMitt = () => { emitter.emit('moneyEvent', 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 'vue'; import emitter from '../../utils/bus' const amount = ref(0); onMounted(() => { emitter.on('moneyEvent', (res: any) => { amount.value = res; }); }) onBeforeMount(() => { emitter.off('moneyEvent'); }); </script> <style lang="less"> .about-container { background-color: #f0f0f0; } </style>
以上がVue3 兄弟コンポーネントに値を渡すために mitt をインストールして使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。