Shulou(Shulou.com)06/01 Report--

This article focuses on "how to achieve Dialog encapsulation in Vue". Interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "how Vue implements Dialog encapsulation".

A common scenario when writing business is to call the same form on different pages, and the common interaction is to display the form in the form of a pop-up window, but it is sometimes troublesome to introduce form components repeatedly on each page.

There are two solutions:

Introduce dynamic components into the root components, and control the presentation form of dynamic components through this.$root.openDialog (name, props) in the business.

Encapsulated as a plug-in to call, such as this.$dialog ("EditDialog.vue", props)

Of course, the business Dialog component needs a set of specifications. Props receives an onOk and onCancel callback, and a visible attribute is defined in the data.

Export default {props: ["onOk", "attributes required by other businesses"], data () {return {visible: false} Vue2

In Vue2, I personally feel that it is easy to write plug-ins. The implementation is as follows, using blending to do some operations and decoupling from the business.

The downside is that the component is dynamically inserted, and the Vue devtools needs to be refreshed to see the component.

Const mixin = {mounted () {document.body.appendChild (this.$el) this.visible = true} Watch: {visible (value) {/ / destroy the instance if (value = false) {setTimeout () = > {this.$destroy () if (this.$el & & this.$ el [XSS _ clean]) {this.$ el [XSS _ clean] .removeChild (this.$el)}} Export default {install (Vue, options) {Vue.prototype.$dialog = (name, props) = > {/ / relative to the plug-in location Import (".. / components/dialogs/" + name) checked during static compilation. Then (module = > {const component = module.default const mixins = component.mixins | | [] mixins.push (mixin) / / to open automatically Dynamic mixing lifecycle function and destroy operation component.mixins = mixins return Vue.extend (component)}). Then (Dialog = > {const dialog = new Dialog ({propsData: props | | {}}) dialog.$mount ()}

The calling method is as follows. Note the this point of the onOk callback, which can be avoided directly by using the arrow function.

This.$dialog ("GroupEdit.vue", {type: "edit", group: {}, onOk: () = > {this.freshList ()}) Vue3 plug-in typography

Unfortunately, because the upgrade Vue.extend of Vue3 is gone and the $mount is gone, the component can only be rendered in the application.

The data between each application is isolated, so plug-ins and other things have to be reintroduced. At the same time, it is also troublesome to interact with each other. It should be possible to introduce the same vuex instance, but I haven't tried much.

For low coupling, we can only create a new application to mount rendering.

Import {createApp, defineComponent} from "vue" import ElementPlus from "element-plus" const mixin = {mounted () {document.body.appendChild (this.$el) this.visible = true}, watch: {visible (value) {/ / destroy the instance if (value = false) {setTimeout () = > {this.$.appContext.app.unmount ()} after the animation ends 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 dynamic component description

In Vue3, the plug-in version also meets the requirements, but it is a completely new application, so it is still a bit troublesome to access this.$root,vuex,router in the business.

So it is better to write dynamic components in Vue3.

Introduce dynamic component into the root component to define some control variables

Export default {data () {return {currentDialog: null, currentDialogProps: null}

If you call this.$root.$dialog (), it looks too ugly, but in fact, you can manually simulate the effect of the plug-in.

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) {/ / destroy the instance if (value = false) {setTimeout () = > {this.$root.currentDialog = null this.$root.currentDialogProps = {} app.config.globalProperties.$dialog = (name) after the animation ends Props) = > {import (". / components/dialogs/" + name). Then (module = > {const component = module.default let mixins = component.mixins | | [] mixins.push (mixin) component.mixins = mixins / / No need for defineComponent (component) vm.currentDialog = markRaw (component) vm.currentDialogProps = markRaw (props | | {})}} some comparisons of hack

Vue3 component instance gets application instance

Vm.$.appContext.app = = app

Vue3 application instance acquires component instance. Note that _ instance can only be accessed in dev environment.

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

There are still coquettish operations, but it's best not to use them.

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} so far, I believe you have a deeper understanding of "how Vue implements Dialog encapsulation". You might as well do it in practice! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.