脚本宝典收集整理的这篇文章主要介绍了

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

总结

以上是脚本宝典为你收集整理的

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

全部内容,希望文章能够帮你解决

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

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过