vue 插件

目录

一、vue 自定义插件

1、vue 自定义插件的语法

2、使用 vue 自定义插件的语法

二、vue 自定义插件的运用

1、自定义一个插件

2、 一次自定义多个组件

---

一、vue 自定义插件

1、vue 自定义插件的语法

vue 的插件通过暴露一个 install 方法，在被使用的时候自动安装。

install 方法接收 2 个参数：

• 的第一个参数是 Vue 构造器；
• 第二个参数是一个可选的选项对象。

2、使用 vue 自定义插件的语法

通过全局方法 Vue.use() 使用插件。它需要在你调用 new Vue() 启动应用之前完成：

// 调用 `MyPlugin.install(Vue)`
Vue.use(MyPlugin)

new Vue({
  // ...组件选项
})

也可以传入一个可选的选项对象：

Vue.use(MyPlugin, { someOption: true })

​​​​​​​vue 插件大全​​​​​​​

二、vue 自定义插件的运用

1、自定义一个插件

vue 的插件通过暴露一个 install 方法，在被使用的时候自动安装。

install 方法接收 2 个参数：

• 的第一个参数是 Vue 构造器；
• 第二个参数是一个可选的选项对象。

案例：

import MyToast from './index.vue'

export default {
  install (Vue, options) {
    // 1. 添加全局方法或 property
    Vue.myGlobalMethod = function () {
      // 逻辑...
    }

    // 2. 添加全局资源
    Vue.directive('my-directive', {
      bind (el, binding, vnode, oldVnode) {
        // 逻辑...
      }
      ...
    })

    // 3. 注入组件选项
    Vue.mixin({
      created: function () {
        // 逻辑...
      }
      ...
    })

    // 4. 添加实例方法
    Vue.prototype.$myMethod = function (methodOptions) {
      // 逻辑...
    }
  }
}

2、 一次自定义多个组件

function VueExtends () {}

VueExtends.install = function (Vue) {
  // 全局扩展 customFormItem
  Vue.component('customFormItem', Vue.component('customFormItem').extend({
    mounted () {
      this.$on('on-form-change', () => {
        this.dispatch('customForm', 'change')
      })
    }
  }))
  // 全局扩展 closePop
  Vue.component('closePopClick', Vue.component('Pop').extend({
    methods: {
      handleClose () {
        // ...
      }
    }
  }))
  // ...
}

export default VueExtends