## :-: Vue?全局掛載組件的通用方法 :-: @/plugins/create.js ``` import Vue from 'vue' /* * Vue 全局掛載組件的通用方法 * create(Component, props, callBack); */ export default function create(Component, props, callBack) { // 創建實例 const vm = new Vue({ render(h) { // h為createElement，返回VNode虛擬Node return h(Component, { props }); } }).$mount(); // 手動掛載實例到body document.body.appendChild(vm.$el); const comp = vm.$children[0]; // 銷毀方法 comp.$remove = function (data) { document.body.removeChild(vm.$el); vm.$destroy(); typeof callBack === 'function' && callBack('close', data); } // 返回組件 return comp; } ``` :-: @/main.js ``` import create from "@/plugins/create.js" Vue.prototype.$create = create; // Vue全局掛載組件的通用方法、 ``` :-: @/components/E-alert.js ``` // 提供一個退出的方法 (其他的跟普通組件一樣) methods: { close(data) { // 調用銷毀組件的方法 (自動判斷是靜態/動態調用，進行不同的處理) this.$remove ? this.$remove(data) : this.$emit("close", data); } } ``` :-: @/App.vue ``` import EAlert from "@/components/E-alert.vue"; export default { mounted() { this.$create( EAlert, { title: "溫馨提示", content: "該Object會當做props傳入組件" }, (type, data) => { /* * '動態'組件的調用函數 * type -- 類型(如close為銷毀時觸發的)、 * data -- '動態'組件返回的數據。 */ console.log(data); } ); } } ```