博客
关于我
Vue 使用Use、prototype自定义全局插件
阅读量:454 次
发布时间:2019-03-06

本文共 1815 字,大约阅读时间需要 6 分钟。

Vue 使用Useprototype自定义全局插件

 

by:授客 QQ1033553122

 

开发环境

 

Win 10

 

node-v10.15.3-x64.msi

下载地址:

 

实现方式1

1.   src目录下新建plugin目录

2.   plugin目录下新建sendReuest.js

export function sendRequest() {

    console.log("send request by sendRequet Plugin")

}

 

3.   plugin目录下新建customPlugin.js

import * as customPlugin from"./sendRequest"

 

export default customPlugin

 

 

 

4.   plugin目录下新建index.js

// 导入所有接口

import customPlugin from"./customPlugin"

 

const install = Vue=> {

if (install.installed) return// 如果已经注册过了,就跳过

 

install.installed = true

 

Object.defineProperties(Vue.prototype, {

   // 注意,此处挂载在 Vue 原型的 $customPlugin对象上

    $customPlugin: {

       get() {

           return customPlugin

       }

    }

  })

}

 

export default install

 

关于Object.defineProperty

这个函数接受三个参数,一个参数是obj,表示要定义属性的对象,一个参数是prop,是要定义或者更改的属性名字,另外是descriptor,描述符,来定义属性的具体描述。

Object.defineProperty(obj, prop, descriptor)

 

5.   修改main.js

如下,新增带背景色部分的内容

// The Vue build version to load with the `import` command

// (runtime-only or standalone) has been set in webpack.base.conf with an alias.

import Vue from "vue"

import App from "./App"

import router from "./router"

 

 

import customPlugin from "@/plugin/index"

//等价导入方式

// import customPlugin from "@/plugin/"

// import customPlugin from "@/plugin "

 

 

Vue.use(customPlugin)

 

Vue.config.productionTip = false

 

/* eslint-disable no-new */

new Vue({

   el:"#app",

   router,

   components: { App },

   template:"<App/>"

})

 

 

6.   .vue组件中引用

.vue组件使用对应的插件调用sendReuqest方法

methods: {

    sendRequest() {

        this.$customPlugin.sendRequest();

    }

},

 

注意:也可以在某些js中直接引入customPlugin,customPlugin.sendRequest()的方式使用,笔者某次实践时这么使用:pluginName.fileModuleName.functionName(),发现会报错,提示fileModuleNameundefined,解决方法:采用Vue.prototype.$pluginName.fileModuleName.functionName()进行调用。

实现方式2

类似实现方式1,不同的地方在于:

1、去掉第4步

2、第5步,在main.js中添加的内容变成如下

 

import customPlugin from "@/plugin/customPlugin"

 

...略

 

Vue.prototype.$customPlugin = customPlugin

 

参考链接

 

 

转载地址:http://smvfz.baihongyu.com/

你可能感兴趣的文章
mysql 敲错命令 想取消怎么办?
查看>>
Mysql 整形列的字节与存储范围
查看>>
mysql 断电数据损坏,无法启动
查看>>
MySQL 日期时间类型的选择
查看>>
Mysql 时间操作(当天,昨天,7天,30天,半年,全年,季度)
查看>>
MySQL 是如何加锁的?
查看>>
MySQL 是怎样运行的 - InnoDB数据页结构
查看>>
mysql 更新子表_mysql 在update中实现子查询的方式
查看>>
MySQL 有什么优点?
查看>>
mysql 权限整理记录
查看>>
mysql 权限登录问题:ERROR 1045 (28000): Access denied for user ‘root‘@‘localhost‘ (using password: YES)
查看>>
MYSQL 查看最大连接数和修改最大连接数
查看>>
MySQL 查看有哪些表
查看>>
mysql 查看锁_阿里/美团/字节面试官必问的Mysql锁机制,你真的明白吗
查看>>
MySql 查询以逗号分隔的字符串的方法(正则)
查看>>
MySQL 查询优化:提速查询效率的13大秘籍(避免使用SELECT 、分页查询的优化、合理使用连接、子查询的优化)(上)
查看>>
mysql 查询数据库所有表的字段信息
查看>>
【Java基础】什么是面向对象?
查看>>
mysql 查询,正数降序排序,负数升序排序
查看>>
MySQL 树形结构 根据指定节点 获取其下属的所有子节点(包含路径上的枝干节点和叶子节点)...
查看>>