How vue calls methods externally-JS Tutorial-php.cn

How vue calls methods externally

php中世界最好的语言

Release： 2018-04-12 17:23:05

Original

2062 people have browsed it

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();

Copy after login

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); 
      });

Copy after login

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); 
  } 
 } 
});

Copy after login

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!