モーダルをプログラムから動的に表示したいなぁと思い調べてみました。一応、表示できることは確認できましたが、子コンポーネント側からの emit で親コンポーネント側でイベントを受け取る方法が今だわかりません。
プログラムから動的にコンポーネントを生成する方法
vue
<script lang="ts" setup>
import { createApp } from "vue";
import AppModal1 from "~~/components/AppModal1.vue"; // 別途、適当にモーダル用のコンポーネントを作っておく
/**
* 動的にモーダルを表示する
*/
function showModal() {
// 動的に生成するコンポーネントをdivでラップする
const wrapper = document.createElement(`div`);
// コンポーネントを動的に生成
const appLogin = createApp(AppModal1);
appLogin.mount(wrapper);
// DOMに追加
document.body.appendChild(wrapper);
}
</script>
<template>
<!-- モーダルを表示されるボタン -->
<button @click="showModal()">Show Modal</button>
</template>
問題点・不明点
プログラムで動的に生成したコンポーネントからイベントを受け取る方法がわからない。vue2 では $on でイベントの登録ができたようだが、vue3 系統では $on, $once, $off 系が削除されている。