Vue3 형제 구성 요소에 값을 전달하기 위해 미트를 설치하고 사용하는 방법

Vue 인스턴스의 EventBus와 비교할 때 mitt.js는 어떻게 더 좋나요?

• 우선 200바이트로 충분히 작습니다.

• 둘째, 모든 이벤트의 모니터링과 일괄 제거를 지원합니다.

• 또한 Vue 인스턴스에 의존하지 않으며 React 또는 Vue 전반에 걸쳐 사용할 수 있으며 심지어 jQuery 프로젝트도 동일한 라이브러리 세트를 사용할 수 있습니다.

프로젝트에 미트 설치

npm install --save mitt

사용 방법 1: 프로토타입에서 선언

1. 등록하고 main.tscolor의 전역

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

에 마운트하세요{#ef2d26}{main.ts}main .ts 2. 정보를 보내려면 home.vue 구성 요소에서 Emitcolor{#ef2d26}{emit}를 사용하세요

<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 구성 요소에서 oncolor{#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.tscolor{#ef2d26}{bus.ts}bus.ts 파일 생성

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

2. home.vue 구성 요소 }{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. about.vue 구성 요소에 oncolor{#ef2d26}{on}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 형제 구성 요소에 값을 전달하기 위해 미트를 설치하고 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!