Vue2 插件

概述#

Vue 的插件就是一个 js 文件，里面允许我们完成一些特定的功能。

使用#

创建一个插件 plugins.js

export default {
  install(Vue) {
    // 全局过滤器
    Vue.filter("mySlice", function (value) {
      return value.slice(0, 4)
    })

    // 全局指令
    Vue.directive("color", {
      // 指令与元素成功绑定时调用
      bind(element) {
        element.style.color = "red"
      },
      // 指令所在元素被插入页面时调用
      inserted(element) {
        element.style.color = "pink"
      },
      // 指令所在的模板被重新解析时调用
      update(element) {
        element.style.color = "skyblue"
      }
    })

    // 给 Vue 原型添加方法
    Vue.prototype.hello = () => {
      alert("你好啊")
    }
  }
}

• Vue 插件文件中需要有 install 方法，install 方法中的参数就是，Vue 构造函数，我们可以对构造函数进行操作。
• 我们可以 Vue 构造函数上添加一些全局的功能，然后一次性导入 Vue。

使用插件

在 main.js 中导入插件，并通过 Vue.use() 使用插件。

// import Vue from "vue"
import Vue from "vue"
import App from "./App.vue"
// 引入插件
import plugins from './plugins'

// 关闭生产提示
Vue.config.productionTip = false

// 使用插件
Vue.use(plugins)

new Vue({
  render: (h) => h(App)
}).$mount("#app")