How vue calls methods externally

This time I will show you how vue calls methods externally. What are the precautions for vue to call methods externally. Here is a practical case, let’s take a look.

1. First define a public vue component;

var eventHub = new Vue();

2. In the event of the current component, in created, use $on to pass to the public component eventHub, translate is customized, and getCardNum(data) is the method to be called externally;

eventHub.$on('translate', function (data) { 
        that.getCardNum(data); 
      });

3. Finally, in the parent component, note that the negative component should be saved in a variable, var vm = new Vue({});

4. Define a method in the methods method in the parent component, and use $emit in the method to receive the method in the public component;

var vm = new Vue({ 
 el: '#example', 
 data: { 
  msg: 'Hello Directive', 
  data: {} 
 }, 
 methods: { 
  getCardNum: function (data, on) { 
   eventHub.$emit('translate', data); 
  } 
 } 
});

5. Finally, you can call the getCardNum(data) function outside the vue component or outside the file. For example, in HTML, you can call it like onclick = vm.getCardNum(); vm is the parent component

6. Be sure to write the variable name of the parent component as vm.getCardNum();

When I was developing with vue, I encountered a pop-up page in the java background that wanted to call a method in my vue component. However, the pop-up page in the background was not in my vue component, and other pages wanted to call it in vue. The method can only be called in the parent component, so I studied it for a long time and finally decided to pass the function() method in the component to the top-level parent component, save the negative component in a variable, and finally directly add it to other pages When calling the method, you cannot use the @click method to call it, because the background page is not inside my vue component, so the call is onclick = vm.getCardNum(); When called like this, vm is the parent component

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

How to get the selection value when using the mint-ui time plug-in

How to operate data binding in vue checkbox Determination and acquisition and calculation

The above is the detailed content of How vue calls methods externally. For more information, please follow other related articles on the PHP Chinese website!