在Vue中可以將自定的方法掛載到全局的方法中,這樣在全局的頁面都可以不通過引用,而直接使用自定義的方法了,在vue中使用非常廣泛。
方法一:使用Vue.prorotype
第一中方法與定義全局變量一樣,在main.js中進行引入(但因為main.js是入口文件,不推薦在其中寫入其他邏輯代碼)。在main.js中寫入函數
Vue.prototype.getPdf = function (){
...
}
這樣在所有的組件中便可以調用函數了。
this.getPdf()
方法二:使用exports.install+Vue.prototype(推薦)
在htmlToPdf.js文件中創建自己的自定義的方法getPdf()。
export.install = function(Vue,options){ vue.prototype.getPdf = function(){ ... } }
在main.js引入並使用
import htmlToPdf from './htmlToPdf'; Vue.use(htmlToPdf);
在用了exports.install
方法時,運行報錯exports is not defined、原因是es6的語法轉換問題,統一使用es6的語法來寫即可。
解決方法:
export default{ install(Vue){ Vue.prototype.getPdf ={ ... } } }
方法三:使用全局變量模塊文件
Global.vue文件:
<script> const token='12345678'; export default { methods: { getToken(){ .... } } } </script>
在需要的地方引入全局變量模塊文件,然后通過文件里面的變量名稱獲取全局變量參數值。
<script> import global from '../../components/Global'//引用模塊進來 export default { data () { return { token:global.token } }, created: function() { global.getToken(); } } </script>