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

This article mainly introduces the example analysis of WeChat Mini Programs component events, which has a certain reference value. Interested friends can refer to it. I hope you will gain a lot after reading this article.

Component event

Event system is the main form of interaction between components. Custom components can trigger arbitrary events, and pages that reference components can listen to these events. About the basic concepts and usage of events.

The method of listening for custom component events is exactly the same as listening for underlying component events:

Code example:

Page ({onMyEvent: function (e) {e.detail / / detail object provided when a custom component triggers an event}})

When a custom component triggers an event, you need to use the triggerEvent method to specify the event name, detail object, and event options:

Code example:

Clicking this button will trigger the "myevent" event Component ({properties: {} methods: {onTap: function () {var myEventDetail = {} / / detail object, provided to the event listener function var myEventOption = {} / / the option to trigger the event this.triggerEvent ('myevent', myEventDetail, myEventOption)})

Options for triggering events include:

Whether the option name type must be defaulted to describe whether the bubblesBoolean No false event is bubbling composedBoolean No false event can cross the component boundary. If it is false, the event can only be triggered on the node tree that references the component, and does not enter the capture phase of the capturePhaseBoolean No false event within any other component.

For the concept of bubbling and capture phases, read the instructions in the events section.

Code example:

/ / Page page.wxml / / component another-component.wxml / / component my-component.wxml / / component my-component.jsComponent ({methods: {onTap: function () {this.triggerEvent ('customevent', {}) / / will only trigger pageEventListener2 this.triggerEvent (' customevent', {}, {bubbles: true}) / / will trigger pageEventListener2, pageEventListener1 this.triggerEvent ('customevent', {}, {bubbles: true) in turn Composed: true}) / / will trigger pageEventListener2, anotherEventListener, pageEventListener1}}) Thank you for reading this article carefully. I hope the article "sample Analysis of WeChat Mini Programs component events" shared by the editor will be helpful to you. At the same time, I also hope that you will support us and pay attention to the industry information channel. More related knowledge is waiting for you 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.