vue3 插件机制入门

2021-10-08 1,455 阅读1分钟

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

前言

vue3.2.16版本已经更新好久了插件还没怎么使用过大家一起来看看吧
自编写代码封装的插件一般是全局的可以是object或者function
添加全局方法或者 property
添加全局指令
添加全局mixin
添加全局实例方法
或者编写为库

编写install插件

最好单独文件编写插件用时将其导入
如果是object 调用install方法
如果是function 调用本身
接收到两个参数由createapp生成的app对象和用户传入的选项
在main.js文件中引入插件文件并在组件中用getCurrentInstance方法获取组件实例实例身上挂载了插件$plug

// 插件对象
export default {
  install: (app, options) => {
  // 插件代码
  // 全局实例
    app.config.globalProperties.$plug = key => {
      console.log(' first plug' + 'key')
    }
  }
}

// 组件文件
import { getCurrentInstance } from '@vue/runtime-core';
// 只能在开发环境中使用
const {ctx} = getCurrentInstance()
ctx.$plug(key的参数)

编写function插件

// 插件函数
export function plug(key) {
  console.log('第二个插件')
}

// 引入函数插件 直接调用
plug('传的key值')

inject与provide

inject 为插件用户提供功能可以用于接收父组件
provide 可以向后代传值

import { provide, inject } from "@vue/runtime-core";

// 私有方法
const _fn = key => {
  console.log('第三个插件')
}

// 向后代组件传
export function provideFn() {
  provide('Id',_fn)
}

// 从父组件接收
export function injectFn() {
  return inject('Id')
}

拓展

由于获取到app对象使用 mixin 和 directive

    app.directive('directive', {
      mounted (el, binding, vnode, oldVnode) {
        // 代码逻辑
      }
      ...
    })

    app.mixin({
      created() {
        // 代码逻辑
      }
      ...
    })

使用插件

use(导入插件名，参数可选可带数据)

总结

今日小知识 get~

友情链接：