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()
        }