VUE 插件注册 - 码农教程

插件通常用来为Vue添加全局功能，插件功能范围没有严格的限制---一般有如下几种

1、添加全局方法或者property

2、添加全局资源：指令、过滤器、过渡等

3、通过全局混入来添加一些组件选项。

4、添加Vue实例方法，通过把他们添加到Vue.prototype上实现

5、一个库，提供自己的API , 同时提供上面提到的一个或多个功能

使用插件

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

Vue.use( MyPlugin )

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

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

Vue.use会自动阻止多次注册相同的插件，届时即使多次调用也只会注册一次该插件。

开发插件

Vue.js的插件应该暴露一个install 方法，这个方法的第一个参数是Vue构造器，第二个参数是一个可选的选项对象

MyPlugin.install = function (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) {
    // 逻辑...
  }
}

实例

新建一个panel.vue 文件

<template>
  <div>
    <div class="number-panel">
      <el-input v-model="checkedNumber" class="margin_t20" style="width:284px;"></el-input>
      <!-- <ul>
        <li @click="clickNumberHander($event)" v-for="item in number" :key="item">{{item}}</li>
        <li @click="clickNumberHander($event)">0</li>
      </ul> -->
      <ul>
        <li @click="clickNumberHander(item)" v-for="item in number" :key="item">{{item}}</li>
        <li @click="clickNumberHander(0)">0</li>
      </ul>      
    </div>
  </div>
</template>
<script>
export default {
  name: "my-panel",
  data() {
    return {
      checkedNumber: "",
      number: [1, 2, 3, 4, 5, 6, 7, 8, 9]
    }
  },
  mounted() {},
  methods: {
    clickNumberHander(str) {
      //target:目标对象
      //currentTarget:绑定事件的对象，恒等于this,
      //this.checkedNumber = this.checkedNumber.concat(e.currentTarget.innerHTML);
      this.checkedNumber += str
    },
    myPanelEvent(str){
      console.log(str)
    }
  }
};
</script>

<style scoped>
.el-input{margin-left:20px;}
.number-panel ul {
  display: flex;
  padding:5px;
  width: 284px;
  border:1px solid #ccc;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
  margin-left:20px;
}
.number-panel ul li {
  display: flex;
  margin:5px;
  /*flex-direction: column;*/
  width: 80px;
  height: 80px;
  background-color: #f9fdf4;
  border: 1px solid #ccc;
  justify-content: center;
  align-items: center;
  cursor:pointer;
}
</style>

注册插件JS panel.js

import panel from './panel.vue'
let test = {}
test.install = function(Vue,options){
    Vue.prototype.$msg = "hello I am PANEL.JS"
    Vue.prototype.$myMethod = function(arr){
        if(arr.length<0){
            return false
        }else{
            arr=arr.join("-")
            return arr
        }
    }
    Vue.component(panel.name, panel)  // 注册全局组件
}
export default test

main.js中引入并使用

import myPluginPanel from "./plugin/panel.js"
Vue.use(myPluginPanel)

vue页面中使用

    <my-panel ref="myPanel"></my-panel>
    <el-button @click="testPluginEvent">测试插件事件</el-button>

    testPluginEvent(){
      console.log(this.$msg)  // hello I am PANEL.JS  // 全局属性
      this.$refs.myPanel.myPanelEvent("this is myPanelEvent") // 调用组件的方法 this is myPanelEvent
      console.log(this.$myMethod([1,2,3]))  // 全局方法  1-2-3
    },

总结：

在插件中注册的全局属性和方法在任何vue页面中都可以使用;

如果在插件中注册全局组件可以通过this.$refs[ref].myComponentMethod()调用组件的方法;