007-讀書筆記-Vue官網 插件

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.參考內容

• 插件
• Vue插件開發入門