vue学习之利用CreateApi 创建全局弹窗

• 原文：  利用CreateApi 创建全局弹窗

1. 在src目录下新建一个createApi文件夹，实际可以根据项目需求来建立文件夹
2. 在文件夹内建立一个弹窗js文件 如 modal.js 写入以下内容

// 引入vue
import Vue from 'vue'
// 解构createApi函数
import { createAPI } from 'cube-ui'
// 引入组件
import modal from '@/components/modal/modal'
// 第二个参数为引入的组件
createAPI(Vue, modal)

createAPI(Vue, modal) 第一个参数为Vue 对象 第二个参数为引入的组件

3. main.js 中引入

import './createApi/modal'

4. 然后就可以全局引用了，在你想引用的组件中定义以下方法：

showModal() {
// [组件名称]Comp
this.modalComp = this.modalComp || this.$createModal({
              // 父组件传值
              $props: {
               // 传入modal组件的数据
               seller: 'seller'
              }
            })
      
            // this.modalComp 返回的是modal组件的实例，可以调用modal 组件中所有的方法
            this.modalComp.show()
        }