007-读书笔记-Vue官网插件

最新推荐文章于 2025-08-14 17:31:00 发布

weixin_33796205

最新推荐文章于 2025-08-14 17:31:00 发布

阅读量95

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：https://segmentfault.com/a/1190000011792616

本文介绍了Vue插件的定义及使用方法。主要内容包括如何定义插件的install方法、该方法的参数及其作用；如何通过Vue.use引入并使用自定义插件；如何在应用中调用插件提供的全局方法、指令及实例方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.插件的定义与使用

1-1 插件的定义

需要注意的点：

定义一个对外公开的install方法
install方法有两个参数：第一个参数Vue的构造器，第二个参数是一个可选的对象

// MyPlugin.js

let MyPlugin = {}

/**
 * install 必须，插件对外公开的方法
 * Vue Vue构造器
 * options 可选参数，是一个对象
 */
MyPlugin.install = function (Vue, options) {
  // 1. 添加全局方法或属性
  Vue.myGlobalMethod = function () {
    console.log('// 1. 添加全局方法或属性')
  }
  // 2. 添加全局资源：指令/过滤器/过渡等
  Vue.directive('my-directive', {
    bind(el, binding, vnode, oldVnode) {
      el.innerHTML = '// 2. 添加全局资源'
    }
  })
  // 3. 注入组件，通过全局 mixin 方法添加一些组件选项
  Vue.mixin({
    created: function () {
      console.log('// 3. 注入组件')
    }
  })
  // 4. 添加实例方法，通过把它们添加到 Vue.prototype 上实现
  Vue.prototype.$myMethod = function (methodOptions) {
    console.log('// 4. 添加实例方法')
  }
}

export default MyPlugin

1-2 插件的使用

在需要使用自定义插件的文件中引入并通过Vue.use使用：

import Vue from 'vue'
import MyPlugin from './myPlugin.js'
Vue.use(MyPlugin) // 使用插件
// Vue.use(MyPlugin, {a:1}) // 使用插件，传入参数

使用自定义插件中的内容:

<!-- 使用自定义指令 -->
<p v-my-directive></p>

Vue.myGlobalMethod()

let vm = new Vue()
vm..$myMethod()

007-读书笔记-Vue官网 插件

1.插件的定义与使用

1-1 插件的定义

1-2 插件的使用

2.参考内容

007-读书笔记-Vue官网插件