How to call methods in vue

Below I will share with you an article on how to call methods externally in Vue. It has a good reference value and I hope it will be helpful to everyone.

1. First define a public vue component;

var eventHub = new Vue();

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

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

3. Finally, in the parent component, note that the negative component must be saved with 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, it can be outside the vue component, or The getCardNum(data) function is called outside the file. For example, in HTML, it can be called onclick = vm.getCardNum(); vm is the parent component

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

When I was developing with vue, I encountered a pop-up page in the java background and wanted to call the method in my vue component, but the pop-up page in the background was not in my vue In the component, the methods in Vue that other pages want to call 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, and The negative component is stored in a variable, and finally the method is called directly in other pages. When calling, it cannot be called with the @click method, 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

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

express builds query server

ProxyTable cross-domain issues in the vue-cli project

How to use refs in React components

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