javascript Vue.jsでEventBusを利用して别にマウントしたコンポーネントやjQueryからイベントを受け取るref：https：//qiita.com/inuscript/item

Posted 2021-05-04

    <div id="app">
      <div>
        <button id="vanilla-external-button">Open from Vanilla</button>
      </div>
      <hello-modal></hello-modal>
    </div>
    <!-- built files will be auto injected -->
    <script>
      document.onreadystatechange = function(){
        var elm = document.getElementById("vanilla-external-button");
        elm.onclick = function(){
          window.ModalEvent.$emit("openModal");
        }
      }
    </script>

import Vue from "vue"
export const ModalEvent = new Vue()
window.ModalEvent = ModalEvent

import $ from "jquery"
import { ModalEvent } from "./ModalEvent"

$(function(){
  $("#jquery-external-button").click(function(){
    ModalEvent.$emit("openModal")
  })
})

<!--ModalOpenButton.vue-->
<template>
  <div>
    <button @click="onClick">Open from Vue</button>
  </div>
</template>

<script>
import { ModalEvent } from "./ModalEvent"

export default {
  methods:{
    onClick(){
      // クリックしたらイベントを発火
      ModalEvent.$emit("openModal")
    }
  }
}
</script>

<!--HelloModal.vue -->
<template>
  <modal name="hello-modal">
    <div class="container">
      Hello!
    </div>
  </modal>
</template>

<script>
import Vue from "vue"
import VModal from "vue-js-modal"
// ModalEventをimportする
import { ModalEvent } from "./ModalEvent"

Vue.use(VModal)

export default {
  created(){
    // created / mountedでMountEventをlistenさせて、modalを開く
    ModalEvent.$on("openModal", () => {
      this.$modal.show("hello-modal")
    })
  }
}
</script>

import Vue from "vue"

const OPEN_MODAL = "openModal"
export const ModalEvent = new Vue({
  methods: {
    emitOpenModal(event){
      this.$emit(OPEN_MODAL, event)
    },
    onOpenModal(cb){
      this.$on(OPEN_MODAL, cb)
    }
  }
})