vue3自定义插件的作用场景及使用示例详解

目录
  • 插件的作用场景
  • 插件的定义(注册)
  • 插件的安装
  • 插件的使用
  • 插件中的Provide/inject

插件的作用场景

在vue2的插件那篇文章我们介绍过插件其实就是vue的增强功能。通常来为vue添加全局功能的。在vue3中插件的功能也是一样的,只是它们在定义上有所不同。

  • 通过app.component()和app.directive()注册一到多个全局组件或自定义指令
  • 通过app.provide()使一个资源可被注入进整个应用
  • 向app.config.globalProperties中添加一些全局实例属性或方法
  • 一个可能上述三种都包含了的功能库(如vue-router)

插件的定义(注册)

一个插件可以是一个拥有 install() 方法的对象,也可以直接是一个安装函数本身。安装函数会接收到安装它的应用实例和传递给 app.use() 的额外选项作为参数:

下面是我定义的一个插件,为了方便管理,在src目录下新建一个plugins文件夹,根据插件的功能,文件夹里面可以放置很多js文件。

export  default {
  install: (app, options) => {
    // 注入一个全局可用的方法
    app.config.globalProperties.$myMethod = () => {
      console.log('这是插件的全局方法');
    }
    // 添加全局指令
    app.directive('my-directive', {
      bind (el, binding, vnode, oldVnode) {
        console.log('这是插件的全局指令');
      }
    })
  }
}

插件的安装

我们一般是安装在全局的,这样方便多个组件使用。

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import myPlugin from './plugins/myPlugin'
createApp(App).use(ElementPlus).use(myPlugin).mount('#app');

插件的使用

在组件中使用

<template>
  <div v-my-directive></div>
  <el-button @click="clicFunc">测试按钮</el-button>
</template>
<script setup>
import { getCurrentInstance } from 'vue';
const ctx = getCurrentInstance();
console.log('ctx', ctx);
const clicFunc = ctx.appContext.app.config.globalProperties.$myMethod();
</script>

效果如下:

插件中的Provide/inject

在插件中,还可以通过provide为插件用户提供一些内容,比如像下面这样,将options参数再传给插件用户,也就是组件中。

// myPlugin.js
export  default {
  install: (app, options) => {
    // 注入一个全局可用的方法
    app.config.globalProperties.$myMethod = () => {
      console.log('这是插件的全局方法');
    }
    // 添加全局指令
    app.directive('my-directive', {
      bind () {
        console.log('这是插件的全局指令');
      }
    })
    // 将options传给插件用户
    app.provide('options', options);
  }
}
// main.js
import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import myPlugin from './plugins/myPlugin'
createApp(App).use(ElementPlus).use(myPlugin, {
  hello: '你好呀'
}).mount('#app');
// 组件中使用
<template>
  <div v-my-directive></div>
  <el-button @click="clicFunc">测试按钮</el-button>
</template>
<script setup>
import { getCurrentInstance, inject } from 'vue';
const ctx = getCurrentInstance();
const hello = inject('options');
console.log('hello', hello);
const clicFunc = ctx.appContext.app.config.globalProperties.$myMethod();
</script>

效果如下:

以上就是vue3自定义插件的作用场景及使用示例详解的详细内容,更多关于vue3自定义插件作用的资料请关注我们其它相关文章!

(0)

相关推荐

  • vue3如何自定义js文件(插件或配置)

    目录 vue3自定义js文件 举例腾讯防水墙js调用文件 vue加载自定义的js文件 效果图 遇见的问题 使用 vue3自定义js文件 在vue3中自定义的js文件,如果需要设置全局this.xxx调用方式的话,需要给方法.变量.常量export出去,调用install()方法 插件的功能范围没有严格的限制——一般有下面几种: 添加全局方法或者 property.如:vue-custom-element 添加全局资源:指令/过滤器/过渡等.如:vue-touch 通过全局混入来添加一些组件选项.

  • Vue3 中自定义插件的实现方法

    目录 1. Vue 插件 2. 自定义插件 2.1 基本用法 2.2 加入组件 2.3 加入指令 2.4 provide & inject 3. 小结 最近在录 TienChin 项目,项目涉及到了 Vue 中插件的定义,因此整了这么一篇文章,手把手教大家在 Vue3 中定义插件,这个技能掌握了,就可以看懂 TienChin 前端代码了. 1. Vue 插件 在 Vue 中,一些简单的功能,我们可以直接定义为全局方法,然后挂到 Vue 上就能使用了,例如在 vhr 中,我们将网络请求方法进行封装

  • Vue3开发必备的六个VSCode插件推荐

    目录 1. Volar 2. Vue VSCode Snippets 3. Auto Close Tag 4. Vue Peek 5. Vue Theme 6. Vite 总结 今天分享 6 个 Vue3 开发必备的 VSCode 插件,可以直接用过 VSCode 的插件中心直接安装使用. 1. Volar 下载数 153 万+ 相信使用 VSCode 开发 Vue2 的同学一定对 Vetur 插件不会陌生,作为 Vue2 配套的 VSCode 插件,它的主要作用是对 Vue 单文件组件提供高亮

  • Vue3 编写自定义指令插件的示例代码

    编写自定义插件 // src/plugins/directive.ts import type { App } from 'vue' // 插件选项的类型 interface Options { // 文本高亮选项 highlight?: { // 默认背景色 backgroundColor: string } } /** * 自定义指令 * @description 保证插件单一职责,当前插件只用于添加自定义指令 */ export default { install: (app: App,

  • vue如何使用swiper插件修改左右箭头的默认样式

    目录 使用swiper插件修改左右箭头的默认样式 vue中修改swiper样式问题 原因 解决方法 总结 使用swiper插件修改左右箭头的默认样式 效果图 修改箭头的背景,以及颜色 .swiper-button-prev, .swiper-button-next{ color: #fff; background: #5e5f5e; } 修改箭头的大小 .swiper-button-prev:after, .swiper-button-next:after { font-size: 14px;

  • 基于Vue3实现前端埋点上报插件并打包发布到npm的详细过程

    目录 项目环境搭建 插件开发 点击事件上报 vue自定义指令 手动上报方法 页面访问次数上报(pv,uv) 页面停留时间(TP) 获取公共参数 引入axios 打包发布 使用说明 Option Options 示例 点击指令上报 手动上报 写在最后 前端埋点对于那些营销活动的项目是必须的,它可以反应出用户的喜好与习惯,从而让项目的运营者们能够调整策略优化流程提高用户体验从而获取更多的$.这篇文章将实现一个Vue3版本的埋点上报插件,主要功能有 通过Vue自定义指令形式实现点击事件上报 提供手动调

  • vue3自定义插件的作用场景及使用示例详解

    目录 插件的作用场景 插件的定义(注册) 插件的安装 插件的使用 插件中的Provide/inject 插件的作用场景 在vue2的插件那篇文章我们介绍过插件其实就是vue的增强功能.通常来为vue添加全局功能的.在vue3中插件的功能也是一样的,只是它们在定义上有所不同. 通过app.component()和app.directive()注册一到多个全局组件或自定义指令 通过app.provide()使一个资源可被注入进整个应用 向app.config.globalProperties中添加一

  • git hooks的作用及创建使用示例详解

    目录 1. 什么是git hooks ?有什么用啊? 1.1 是个啥 1.2 有啥用?我以前没用过它不也一样好好的吗?我干嘛要用它? 2. 怎么创建一个 git hooks ? 2.1 首先看git hooks存在哪里 2.2 创建一个pre-commit钩子 2.3 触发钩子 3 有用点的实战 4 总结 5 其他 5.1 如果在mac下报以下异常 5.2 常用钩子 5.3 hooks可以使用什么语言? 1. 什么是git hooks ?有什么用啊? 1.1 是个啥 git大家都在用吧,相信现在

  • vue3响应式Object代理对象的读取示例详解

    目录 正文 读取属性 xx in obj for ... in 正文 从这一章开始,作者将更新深入的讲解响应式,尤其是vue3响应式的具体的实现.其实在前面一章,如果你仔细阅读,你是可以实现一个简单的响应式函数的,类似于@vue/reactive,当然那只是个demo,是个玩具,我能不能在生产环境上去使用的,它差了太多功能和边界条件. 现在,我们才是真正的深入@vue/reactive. 在vue中,obj.a是一个读取操作,但是仔细想来,读取这个操作很宽泛. obj.a // 访问一个属性 '

  • Vue3组件更新中的DOM diff算法示例详解

    目录 同步头部节点 同步尾部节点 添加新的节点 删除多余节点 处理未知子序列 移动子节点 建立索引图 更新和移除旧节点 移动和挂载新节点 最长递增子序列 总结 总结 在vue的组件更新过程中,新子节点数组相对于旧子节点数组的变化,无非是通过更新.删除.添加和移动节点来完成,而核心 diff 算法,就是在已知旧子节点的 DOM 结构.vnode 和新子节点的 vnode 情况下,以较低的成本完成子节点的更新为目的,求解生成新子节点 DOM 的系列操作. 举例来说,假说我们有一个如下的列表 <ul>

  • vue3项目新用户引导组件driver.js示例详解

    好用的用户引导插件有 intro.js 和 driver.js 两个,对比了一下,最终还是使用了driver.js主要有以下原因: 用法简单 可以商用 总要选一个吧 项目使用的是vue3+ts因为多个地方需要使用引导,就直接做成组件使用不废话上代码 yarn add driver.js 或者 npm i driver.js 组件代码 <!-- * @Description: 新用户引导组件 * @LastEditTime: 2022-08-19 11:43:25 --> <templat

  • vue3使用自定义指令实现el dialog拖拽功能示例详解

    目录 实现el-dialog的拖拽功能 通过自定义指令实现拖拽功能 实现拖拽功能 使用方式 实现el-dialog的拖拽功能 这里指的是 element-plus 的el-dialog组件,一开始该组件并没有实现拖拽的功能,当然现在可以通过设置属性的方式实现拖拽. 自带的拖拽功能非常严谨,拖拽时判断是否拖拽出窗口,如果出去了会阻止拖拽. 如果自带的拖拽功能可以满足需求的话,可以跳过本文. 通过自定义指令实现拖拽功能 因为要自己操作dom(设置事件),所以感觉还是使用自定义指令更直接一些,而且对原

  • vue3.2自定义弹窗组件结合函数式调用示例详解

    目录 前言 手写弹窗组件 组件调用 函数式调用 如何使用 含样式完整源码 效果图 前言 涉及的vue3知识点/API,createApp defineProps defineEmits <script setup> v-model <script setup> 就是 setup 语法糖 defineProps 和 props 用法差不多 defineEmits 声明可向其父组件触发的事件 手写弹窗组件 很简单的弹窗组件,支持设置标题 <script setup> def

  • django自定义非主键自增字段类型详解(auto increment field)

    1.django自定义字段类型,实现非主键字段的自增 # -*- encoding: utf-8 -*- from django.db.models.fields import Field, IntegerField from django.core import checks, exceptions from django.utils.translation import ugettext_lazy as _ class AutoIncreField(Field): description =

  • 详解polyfills如何按需加载及场景示例详解

    目录 前言 青铜时代 火枪时代 webpack添加babel-loader @babel/preset-env @babel/polyfill 配置 useBuiltIns 加入 @babel/plugin-transform-runtime 前言 青铜时代 最使前端头痛的问题,莫过于浏览器兼容性,无论是js,还是css都要考虑浏览器兼容性问题,在webpack出来之前,这无非是一个非常头疼的问题,查到一个兼容性问题,查找很多资料,解决一下,再出来一个问题又要花很长时间解决一下,这无疑要花费很长

  • jQuery.Validate表单验证插件的使用示例详解

    jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求. 请在这里查看示例 validate示例 示例包含 验证错误时,显示红色错误提示 自定义验证规则 引入中文错误提示 重置表单需要执行2句话 源码示例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <

随机推荐