目錄Vue2 寫法Vue3 插件版寫法Vue3 動態(tài)組件寫法一些比較 hack 的寫法

在寫業(yè)務(wù)的時候很常見的一個場景就是需要在不同的頁面調(diào)用同一個表單，常用的交互就是把表單以彈窗的形式展示，但是在每個頁面又重復(fù)的引入表單組件有時候又很麻煩

解決方案有兩個：

在根組件里面引入動態(tài)組件，在業(yè)務(wù)里面通過this.$root.openDialog(name, props)去控制動態(tài)組件的展示形式 封裝成插件的形式去調(diào)用，比如this.$dialog(’EditDialog.vue’, props)

當(dāng)然了，業(yè)務(wù) Dialog 組件要有一套規(guī)范，props 接收一個 onOk、onCancel 回調(diào)，data 里面定義一個 visible 屬性

<template> <el-dialog :title='title' :visible.sync='visible' append-to-body> <!-- 業(yè)務(wù)代碼 --> </el-dialog></template><script>export default { props: [’onOk’, ’其他業(yè)務(wù)需要的屬性’], data() { return { visible: false } }}</script>Vue2 寫法

在 Vue2 里面我個人感覺寫成插件是比較好用的，實現(xiàn)如下，使用混入做了一些操作，和業(yè)務(wù)進行解耦

有點不太好的地方是組件是動態(tài)插入的，Vue devtools 要刷新下才能看到組件

const mixin = { mounted() { document.body.appendChild(this.$el) this.visible = true }, watch: { visible(value) { // 動畫結(jié)束后銷毀實例 if (value === false) {setTimeout(() => { this.$destroy() if (this.$el && this.$el.parentNode) { this.$el.parentNode.removeChild(this.$el) }}, 400) } } }}export default { install(Vue, options) { Vue.prototype.$dialog = (name, props) => { // 相對于該插件的位置，靜態(tài)編譯期間會檢查的 import(’../components/dialogs/’ + name).then(module => { const component = module.default const mixins = component.mixins || [] mixins.push(mixin) // 實現(xiàn)自動打開，動態(tài)了混入生命周期函數(shù)和銷毀操作 component.mixins = mixins return Vue.extend(component)}).then(Dialog => { const dialog = new Dialog({ propsData: props || {} }) dialog.$mount()}) } }}

調(diào)用方式如下，注意 onOk 回調(diào)的 this 指向，使用箭頭函數(shù)直接就避免了 😎

this.$dialog(’GroupEdit.vue’, { type: ’edit’, group: {}, onOk: () => { this.freshList() }})Vue3 插件版寫法

很糟糕的是，由于 Vue3 的升級Vue.extend沒有了，$mount也沒有了，組件只能在應(yīng)用里面去渲染

每個應(yīng)用之間的數(shù)據(jù)是隔離的，所以插件什么的都要重新引入。同時如果要交互交互的話也比較麻煩，引入同一個 vuex 實例應(yīng)該可以，但是沒怎試

為了低耦合只能去新建一個應(yīng)用去掛載渲染

import { createApp, defineComponent } from ’vue’import ElementPlus from ’element-plus’const mixin = { mounted() { document.body.appendChild(this.$el) this.visible = true }, watch: { visible(value) { // 動畫結(jié)束后銷毀實例 if (value === false) {setTimeout(() => { this.$.appContext.app.unmount()}, 400) } } }}export default { install(app) { app.config.globalProperties.$dialog = (name, props) => { import(’../components/dialogs/’ + name).then(module => { const component = module.default let mixins = component.mixins || [] mixins.push(mixin) component.mixins = mixins return defineComponent(component)}).then(Dialog => { const app = createApp(Dialog, props || {}) app.use(ElementPlus) app.mount(document.createElement(’div’))}) } }}Vue3 動態(tài)組件寫法

在 Vue3 里面，插件版的寫法同樣達到了要求，但是完全是一個新引應(yīng)用了，如果在業(yè)務(wù)里訪問this.$root,vuex,router還是有點麻煩的

所以 Vue3 里面還是動態(tài)組件的寫法比較好

在根組件引入動態(tài) component，定義一些控制變量

<template> <router-view></router-view> <component :is='currentDialog' v-bind='currentDialogProps' /></template><script>export default { data() { return { currentDialog: null, currentDialogProps: null } }}</script>

調(diào)用的的話this.$root.$dialog(),看起來太難看，其實還是可以手動模擬插件的效果的

const app = createApp(App)const vm = app.mount(’#app’)initDialog(app, vm)function initDialog(app, vm) { const mixin = { mounted() { this.visible = true }, watch: { visible(value) {// 動畫結(jié)束后銷毀實例if (value === false) { setTimeout(() => { this.$root.currentDialog = null this.$root.currentDialogProps = {} }, 400)} } } } app.config.globalProperties.$dialog = (name, props) => { import(’./components/dialogs/’ + name).then(module => { const component = module.default let mixins = component.mixins || [] mixins.push(mixin) component.mixins = mixins // 不需要 defineComponent(component) vm.currentDialog = markRaw(component) vm.currentDialogProps = markRaw(props || {}) }) }}一些比較 hack 的寫法

vue3 組件實例獲取應(yīng)用實例

vm.$.appContext.app == app

vue3 應(yīng)用實例獲取組件實例，注意_instance 僅在 dev 環(huán)境能訪問到

app._instance.proxy == vmapp._instance.root.proxy == vmapp._instance.ctx.$root == vm

騷操作還是有的，但是最好不要用

const app = createApp(App)const vm = app.mount(’#app’)if (process.env.NODE_ENV === ’production’) { app._instance = { proxy: vm, root: { proxy: vm }, ctx: { $root: vm } }}

到此這篇關(guān)于Vue實現(xiàn)Dialog封裝的文章就介紹到這了,更多相關(guān)Vue Dialog封裝內(nèi)容請搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！