How to monitor Vue slot changes? Try this trick!

How to monitor the slot changes ofVue? The following article will introduce you to the method of monitoring Vue slot changes. I hope it will be helpful to you!

Lately, I need to update the state of a component whenever its content (slots, subcomponents, etc.) changes. For context, it's a form component that keeps track of the validity status of its inputs.

The code snippet below is written inOptionsAPI format, but can be used in both Vue2 and Vue2 except where specified. [Related recommendations:vuejs video tutorial]

Start

Start by controlling the form state, modify a class according to the state, and use child content38b537b6886351ac721d89624ba185caFilling:

In order to update theisInvalidproperty, we need to add a triggered event, you can use thesumitevent, But I prefer to use theinputevent.

There are 7 form events: focus, blur, input, select, change, reset, submit, etc. For details, please read this article:https://blog.csdn.net/qq_4379 ...

The form will not trigger theinputevent, but we can use"Event Delegate". We attach the listener to the parent element (ff9c23ada1bcecdd1a0fb5d5a0f18437) and when the event occurs on its child elements (d5fd7aea971a85678ba271703566ebfd,221f08282418e2996498697df914ce4e,4750256ae76b6b9d804861d8f69e79d3, etc.) will be triggered.

Anytime aninputevent is triggered in this component's58cb293b8600657fad49ec2c8d37b472, the form will capture the event.

Validation logic can be simple or complex. For demonstration purposes, this article uses a simple method to useform.checkValidity()API to check whether the form is valid based on HTML validation attributes.

In order to access theff9c23ada1bcecdd1a0fb5d5a0f18437element. You can userefsor$elattributes. For simplicity, this article uses$el.

Question

There is a little problem here. What happens if the content of the form changes? What happens if and5fd7aea971a85678ba271703566ebfdis added to the DOM when the form loads?

For example, we call this form component"MyForm". In App, the content is as follows:

// App.vue  

WhenApp.vueHide and display certaininputthrough conditions, our form needs to know. In this case, we would think of tracking the validity of the form content when it changes, not just on theinputevent or themountedlifecycle hook. Otherwise, incorrect information may be displayed.

Friends who are familiar with Vue’s life cycle hooks may think of usingupdateto track changes. In theory, this sounds great. In practice, it creates an infinite loop and the browser hangs.

Solution

After some research and testing, the best solution is to use theMutationObserverAPI. It is a built-in method of the browser that provides the ability to monitor changes to the DOM tree. This API can be notified if nodes are added or removed, attributes change, or text content changes.

It is a native method, so it is not limited to the framework.

When using it, first use theMutationObserverconstructor to create a new observer instance and specify the callback function of this instance. Called after every DOM change, this callback is called. The callback function accepts two parameters, the first is the change array, and the second is the observer instance. Rewrite ourformcomponent as follows:

You also need to use # here. ##beforeUnmountlife cycle event to disconnectobserver, which will clear any memory allocated by it.

Finally, we pass the

isInvalidstatus to the plugin slot of the content we want to access. This is also called the scope's slot and is very useful.

With this setup, we can add any number of

inputto our form component and add any conditional rendering logic it needs. As long asinputuses the HTML validation attribute, the form will keep track of whether it is in a valid state.

Additionally, because we are using scoped slots, we provide the form's state to the parent, so the parent can react to changes in validity.

For example, in

App.vue, we want to "disable" the submit button when the form is invalid, we can write like this

nice~.

Hope this article can be helpful to your future development.

(Learning video sharing:web front-end development,Basic programming video)

The above is the detailed content of How to monitor Vue slot changes? Try this trick!. For more information, please follow other related articles on the PHP Chinese website!