美文网首页uin-app简明uniapp教程微信小程序
uniapp—通过挂载 Vue.prototype来自定义并引用

uniapp—通过挂载 Vue.prototype来自定义并引用

作者: 瑟闻风倾 | 来源:发表于2020-04-03 14:53 被阅读0次

将一些使用频率较高的常量或者方法,直接扩展到 Vue.prototype 上,每个 Vue 对象都会“继承”下来。
优点:只需要在 main.js 中定义好即可在每个页面中直接调用。
注意:Vue 上挂载属性的方式只支持vue页面,不能在 nvue页面中使用。

示例如下

  • 在 main.js 中挂载属性/方法
Vue.prototype.apiUrl = 'http://uniapp.dcloud.io';  
Vue.prototype.now = Date.now || function () {  
    return new Date().getTime();  
};  
Vue.prototype.isArray = Array.isArray || function (obj) {  
    return obj instanceof Array;  
};
Vue.prototype.dosomething = function(){
 console.log('do....');
}
  • 在test.vue 中调用
<template>
    <view>
        当前时间戳:{{time}}
    </view>
</template>

<script>
export default {
    data() {
        return {
            time:""
        }
    },
    methods: {
        
    },
    onLoad:function(){
        this.dosomething();
        console.log("now:" + this.now());
        this.time = this.now();
    }
}
</script>

<style>

</style>

建议:

  • 每个页面中不要再出现和全局变量(或方法)相同的属性名(或方法名)。
  • 在 Vue.prototype 上挂载的属性或方法,可以加一个统一的前缀。比如 $url、global_url 这样,在阅读代码时也容易与当前页面的内容区分开。

相关文章

  • uniapp—通过挂载 Vue.prototype来自定义并引用

    将一些使用频率较高的常量或者方法,直接扩展到 Vue.prototype 上,每个 Vue 对象都会“继承”下来。...

  • vue的Bus使用

    父子页面的传参 1、定义Bus 2、挂载Bus 将bus挂载到vue.prototype上 3、子组件调用 在子组...

  • 引用外部js文件(全局变量)

    公用模块 新建utils-help.js 在index.vue中引用 挂载 Vue.prototype 将一些使用...

  • uniapp—自定义并引用公用模块

    定义一个专用的模块,用来组织和管理这些全局的变量,在需要的页面引入。优缺点:这种方式维护起来比较方便,但是缺点就是...

  • Vue面试问题

    1.怎么给vue定义全局的方法? 1、通过prototype,这个非常方便。Vue.prototype[metho...

  • 1.22、Vue引入全局变量

    在程序入口的main.js文件里面,将上面那个Global.vue文件挂载到Vue.prototype。

  • vue-router

    定义并引入组件 定义路由 创建 router 实例 创建和挂载到根实例(main.js中挂载到根实例) 路由信息对...

  • router

    先定义模板 创建组件 定义路由 创建路由实例并挂载 html的写法

  • Vue挂载全局方法

    在main.js里引入 在main.js里挂载到vue.prototype上 使用的时候在任何页面this.no()

  • Vue.prototype挂载的方法

    重置表单这个功能经常用到,于是想要把resetForm方法绑定在Vue原型上,以便通过this.resetForm...

网友评论

    本文标题:uniapp—通过挂载 Vue.prototype来自定义并引用

    本文链接:https://www.haomeiwen.com/subject/ymihphtx.html