美文网首页
Vue插件(一)添加全局方法或全局属性

Vue插件(一)添加全局方法或全局属性

作者: fanren | 来源:发表于2022-07-18 14:40 被阅读0次

    前言

    Vue中添加插件最简单的方式,就是直接给Vue添加一个全局的静态方法或变量;

    一个Vue项目中,Vue是唯一的,那么给Vue添加的静态方法或变量也是唯一的,并且可以被任何Vue组件使用;

    一、创建一个插件

    • 创建一个DateFormatter.js文件
      组件内部实现代码:
    import moment from 'moment'
    export default function dateFormat(date, format) {
        return moment(date).format(format)
    }
    

    二、引入插件

    • main.js文件中,引入插件
    import dateFormat from './DateFormatter.js'
    Vue.dateFormat = dateFormat;
    
    • 使用Vue.全局方法,可以给Vue添加全局的方法

    三、使用插件

    • 使用插件
    <script>
    import Vue from 'vue'
    export default {
      name: 'App',
      data() {
        return {
          date: new Date
        }
      },
      computed: {
        currentDate() {
          // 调用插件
          return Vue.dateFormat(this.date, 'YYYY-MM')
        }
      }
    }
    </script>
    
    • 使用Vue.全局方法(),可以直接调用全局方法;

    使用该方法的前提是引入Vue文件import Vue from 'vue'

    四、缺陷

    使用全局方法的方式,可以给Vue添加插件,但是在使用的时候,必须每次都需要引入Vue文件(import Vue from 'vue'),使用起来还是比较繁琐的。
    为了简化上一步,我们可以给Vue添加全局的实例方法。> 在纯Vue项目中,

    相关文章

      网友评论

          本文标题:Vue插件(一)添加全局方法或全局属性

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