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