vue3自定义插件（如何将弹窗组件挂载全局）使用

在Vue 3中，你可以创建一个自定义插件来将一个组件全局挂载，使其在任何组件内部都可以作为一个全局组件来使用。以下是如何创建一个简单的全局弹窗插件的步骤：

1. 创建一个弹窗组件（Modal.vue）。
2. 创建一个插件文件（modalPlugin.js）。
3. 在插件中定义一个方法来注册全局组件。
4. 在插件的install方法中注册弹窗组件。
5. 在主文件（main.js）中使用该插件。

以下是实现这些步骤的示例代码：

Modal.vue

<template>
  <div class="modal">
    <!-- 弹窗内容 -->
  </div>
</template>
 
<script>
export default {
  name: 'Modal',
  // 组件的其余部分...
};
</script>

modalPlugin.js

import Modal from './Modal.vue';
 
export default {
  install(app) {
    // 注册全局组件
    app.component('Modal', Modal);
  }
};

main.js

import { createApp } from 'vue';
import App from './App.vue';
import modalPlugin from './plugins/modalPlugin';
 
const app = createApp(App);
 
// 使用自定义插件
app.use(modalPlugin);
 
app.mount('#app');

现在，你可以在任何组件内部使用 <Modal></Modal> 来添加弹窗组件了。这个弹窗组件将会作为全局组件被识别，无需在每个使用它的组件内部单独导入。