Vue全局注册

Vue开发过程中经常会有公告的模板或者过滤器等,这些都要依赖vue全局注册一些方法、属性、模板等。

创建plugin.js:

export default {
    install:(Vue) => {
 
    }
}

main里面引入:

import plugin from './utils/plugin'
Vue.use(plugin);

之前说过了Vue.use,我们把接下来注册全局的方法都写在install里面。

全局注册属性或者方法:

Vue.a = 100;
Vue.myFun = () => {
    console.log(200)
}

因为这是用的JavaScript类的静态特性,所以调用的时候要有Vue的对象,在页面中要引入Vue:

import Vue from 'vue'

然后在生命周期里直接调用:

mounted(){
    console.log(Vue.a)
    console.log(Vue.myFun)
}

原型实例方法或者属性:

Vue.prototype.$myNum = 400;
Vue.prototype.$myCon = () => {
    console.log(300);
}

在页面中调用:

console.log(this.$myNum);
this.$myCon();

这里用的是JavaScript在原型中添加方法或者属性。

Vue提供了自定义指令的功能:

Vue.directive('time-down', {
    bind(el, binding) {
        let time = parseInt(binding.value);
        let setInter = setInterval(() => {
            time--;
            el.innerHTML = time;
            if(time == 0){
                clearInterval(setInter);
            };
        },1000);
    },
    inserted() {},
    update() {},
    componentUpdated() {},
    unbind() {}
});

这边写了一个倒计时的指令,在页面使用:

<p v-time-down="60">60</p>

其他方法和参数可以看官网。

混入Vue.mixins(),之前有介绍了混入,混入也是vue全局注册的一个方法。

注册组件Vue.component():

可以直接用语法,我直接新建一个comTest.vue文件:

<template>
  <div class="">
    <p>这是全局测试组件</p>
  </div>
</template>

<script>

    export default {
        data() {
            return {}
        },
        mounted() {

        },
        methods: {},
        components: {}
    }
</script>

<style scoped>

</style>

然后plugin.js引入并注册:

import comTest from '@/views/comTest'
Vue.component('com-test', comTest);

在页面中直接使用:

<com-test></com-test>

Component还有局部注册的,这个应该所有人都会,就不细说了。

Vue全局注册大概就这几个方法,当然,Vue还有另外一些指令,比如过滤器Vue.filter等也是可以全局编写。

(完)

本文分享自微信公众号 - coding个人笔记(gh_2ce38b49dae1),作者:wade

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-10-30

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Vue生命周期

    Vue在GitHub上面的star数量已经超过了react,虽然npm包下载的数量还没有react多,但是Vue上升的势头真的很猛。

    wade
  • Vue.use()

    用vue开发的一定对Vue.use不陌生,在引入一些插件的时候经常需要在main里面用到这个语法。

    wade
  • Webpack第一天

    Webpack是什么?我觉得我没必要再介绍了,相信开发前端的都知道现在webpack在前端所占的地位。Webpack就是一个模块打包工具,帮我们转换代码、压缩文...

    wade
  • Vue.js简介

    Vue.js简介 Vue.js(读音 /vjuː/, 类似于view)是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设...

    xiangzhihong
  • Vue.js快速入门

    Vue.js简介 Vue.js(读音 /vjuː/, 类似于view)是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设...

    xiangzhihong
  • 01-Vue.js入门系列

    1.1. Vue简介 Vue是一个前端的双向绑定类的框架,发音[读音 /vjuː/, 类似于 view]。新的Vue版本参考了React的部分设计,当然也有自己...

    老马
  • Vue 组件扩展

    最近,新项目架构搭建在扩展组件的场景中:图表使用了extends方式,而公共业务server和view之间使用了mixins方式。对于二者的选择,我们通常会解释...

    奋飛
  • vue.js快速上手

      Vue.js是一个构建数据驱动的web界面的库。技术上,它重点集中在MVVM模式的ViewModel层,因此它非常容易学习,非常容易与其它库或已有项目整合。

    笔阁
  • Vue.js系列之二Vue实例

    每个Vue应用都是通过Vue函数创建一个新的Vue实例开始,代码如下: var vm=new Vue({}); {}是创建Vue应用时的参数对象 1、Vue实例...

    郑小超.
  • 浮点数 floating point

    1.对大阶[1] 2.加有效数(指数已相同,把有效数部分相加) 3.规格化[2],溢出处理(使其变为科学表示法形式) 4.舍入处理

    平凡的学生族

扫码关注云+社区

领取腾讯云代金券