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

2024年4月9日 103次阅读 来源: 俱沫

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.参考内容

    原文作者：俱沫
    原文地址: https://segmentfault.com/a/1190000011792616
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞