How vue3 encapsulates Notification components

This article is about how vue3 encapsulates Notification components. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

The idea of the pop-up window assembly is basically the same: insert a HTML into the body. I'm going to talk about my approach in terms of creating, inserting, and removing.

Let's create a file first.

| |-- packages |-- notification |-- index.js # component entry |-- src |-- Notification.vue # template |-- notification.ts creation |

The use of h _ createVnode _ h is the abbreviation of createVnode () for h _ r _ r H () turns Notification.vue into virtual dom,render () turns virtual dom into nodes. Render needs a node (the second parameter) to create a container that is only used to hold Notification.vue. All I want is the HTML structure in Notification.vue, so I created container to change vm into a node, that is, HTML, so that it can be inserted into body.

Import {h, render} from "vue" import NotificationVue from ". / Notification.vue" let container = document.createElement ('div') let vm = h (NotificationVue) render (vm, container)

Confused: why the .vue file can be rendered in App.vue, where you need to convert it to a virtual dom and then to a node

insert

Insert the first child element in this node into the body through document.body.appendChild so that it can be displayed on the page.

Document.body.appendChild (container.firstElementChild) remove

Vue cannot directly manipulate dom, but can only operate virtual dom. You can overwrite the original content with null.

Render (null, container)

Do not understand the principle of vue implementation is just to do the effect, online access to information is almost a month to do it, it seems that I am really not suitable for programming

Complete code

/ / Notification.vue Notification x interface Props {onClose?: () = > void} defineProps ()

There is a question why .vue files can be rendered directly in app.

/ / notification.tsimport {h, render} from "vue" import NotificationVue from ". / Notification.vue" const notification = () = > {let container = document.createElement ('div') let vm = h (NotificationVue, {onClose: close}) render (vm, container) document.body.appendChild (container.firstElementChild) / / manually close function close () {render (null) Container)}} export default notification uses / / App.vueimport {BNotification} from ".. / packages" BNotification () in App.vue. Thank you for reading! This is the end of this article on "how to encapsulate Notification components in vue3". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it out for more people to see!