Example of a parent component's method using external objects

Recently, I encountered a classmate asking me how to use external objects for the vue parent component. The specific examples are as follows:

There is component a:

<div @click="onClick">component a</div>

// componet a
...
methods: {
 onClick(evt) {
  // doSomething can only get mouseEvent here  (evt); // Call external processing functions }
}
...

There is component B, refer to component a, and pass in the outsideClickHandler method:

<v-componetA :outside-click-handler="onClick">componentB</v-componetA>

The above encapsulation is the most common encapsulation in the component library. In actual use, sometimes you need to use the data object in component B in the outsideClickHandler method of component A, and the code of component cannot be changed. What should you do at this time?

In fact, the solution is also very simple, but sometimes we will be "obsessed".

Don't say nonsense, add the code!

// componet b
...
data() {
 a: {} // data},
methods: {
 onClick(evt) {
  // The key is to return a function  return (evt) => {
   // You can also use closures directly here   ();
  }
 }
}
...

In short, for vue functions, when parameters cannot be directly passed, closure implementation can be considered. What this article is just a simple example. JS functions have many interesting applications as first-class citizens.

Summarize

The above is the entire content of this article. I hope the content of this article will be of some help to your study or work. If you have any questions, you can leave a message to communicate. Thank you for your support.