vue中呼叫methods的方法

下面我就為大家分享一篇vue中實現在外部呼叫methods的方法，具有很好的參考價值，希望對大家有幫助。

1.先定義一個公共的vue元件；

var eventHub = new Vue();

2.在事件目前的元件中，在created中，用$on向公共的元件eventHub傳遞，translate是自訂的，getCardNum(data)是要在外部呼叫的方法;

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

3.最後在父元件中，注意負元件要用一個變數保存，var vm = new Vue({})；

4.在父元件中的methods的方法中定義一個方法，在方法裡用$emit接收公共元件裡的方法；

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

5.最後就可以在vue元件外部，或者檔案外部呼叫getCardNum（data）這個函數，例如在html中就可以onclick = vm.getCardNum() 這樣來呼叫；vm是父元件

6.注意一定要把父元件的變數名稱寫上vm.getCardNum()；

我用vue開發的過程中，遇到java後台的彈窗頁面想要呼叫我vue元件中的方法，可是後台的彈窗頁面並沒有在我的vue在元件中，其他的頁面想要調用的vue中的方法，只能在父元件中調用，於是研究了很久，最後確定，將元件中的function()方法傳遞到最上一層的父元件中，將負元件保存在變數中，最後直接在其他頁面中呼叫方法，呼叫的時候，就不能用@click方法來呼叫了，因為後台的頁面並不在我的vue元件內部，於是呼叫就是onclick = vm.getCardNum ();這樣調用，vm是父元件

上面是我整理給大家的，希望今後會對大家有幫助。

相關文章：

express建置查詢伺服器

#在vue-cli專案中proxyTable跨網域問題

在React元件中refs的使用方法

以上是vue中呼叫methods的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！