首頁 > web前端 > js教程 > vue如何在外部呼叫methods

vue如何在外部呼叫methods

php中世界最好的语言
發布: 2018-04-12 17:23:05
原創
2091 人瀏覽過

這次帶給大家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是父組件

相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀:

使用mint-ui時間外掛程式時怎麼取得選擇值

vue checkbox怎麼操作資料綁定及獲取與計算

以上是vue如何在外部呼叫methods的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板