イベントエミッタ

6839 ワード
mitt vue vue3 emitter テキストリンク
私は最近、WebpackプラグインModule federationでマイクロフロントエンドを作るように頼まれました
このマイクロフロントエンドは以前にVUEXライブラリを使用していましたが、それはオープン/クローズモードにのみ使用されました.
それで、我々はそれをより単純な何かと取り替える傾向がありました.
我々の候補の中には非常に小さな図書館ですmitt.
import mitt from "mitt";
export const emitter = mitt();
我々の最初の試みは、マウントされたライフサイクル方法でエミッタを登録しました.
export default defineComponent({
...
  mounted() {   
    this.emitter.on("open-modal", name => { 
      this.shouldDisplay = name === ModalType.ThankYou; 
    }); 
  },
...
これは別のコンポーネントでエミッタを使用している場合にのみ動作しますが、VUEコンポーネントの外に出力したい場合は動作しません.
これはVueアプリのインスタンスを持たなければならないからです.
あなたが我々のようにそれを使うならば、フックで
import {emitter} from "../utils/emitter";

export const useModal = () => {
  const openModal = (name: string) => {
    emitter.emit('open-modal', name)
  }
  const closeModal = () => {
    emitter.emit('open-modal', '')
  }
  return { openModal, closeModal };
}
イベントリスナーをフックで登録する必要があります
<template>
  <Modal :isOpen="shouldDisplay" @close-modal="closeModal">
...
  </Modal>
</template>

<script lang="ts">
...
export default defineComponent({
  name: "CustomModal",
  components: {
    Modal,
  },
  setup() {
    const {closeModal} = useModal();
    onMounted(() => {
      emitter.on("open-modal", name => {
        shouldDisplay.value = name === ModalType.ThankYou;
      })
    })
    return {
      closeModal,
      shouldDisplay,
    };
  }
});
</script>
あなたもイベントエミッタでの経験がありますか?
共有あなたのアイデア.
SwipeMenuListViewの横滑りmenuの内容修正について
Android-cameraアプリケーションからドライバへ-ドライバコード