Vue自定義函數掛載到全局方法


  在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>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM