1.插件的定义与使用

1-1 插件的定义

需要注意的点:

  1. 定义一个对外公开的install方法
  2. 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()

2.参考内容

本文固定链接: http://www.js-code.com/vue-js/vue-js_24508.html