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

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

WBOY

풀어 주다： 2023-06-01 19:22:04

앞으로

1984명이 탐색했습니다.

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

우선 200바이트로 충분히 작습니다.
둘째, 모든 이벤트의 모니터링과 일괄 제거를 지원합니다.
또한 Vue 인스턴스에 의존하지 않으며 React 또는 Vue 전반에 걸쳐 사용할 수 있으며 심지어 jQuery 프로젝트도 동일한 라이브러리 세트를 사용할 수 있습니다.

프로젝트에 미트 설치

npm install --save mitt

로그인 후 복사

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

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

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

로그인 후 복사

에 마운트하세요{#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 중국어 웹사이트의 기타 관련 기사를 참조하세요!