vue自定义插件的简单使用

src/plugins/myPlugins

// vue插件一定暴露一个对象
let myPlugins = {}

myPlugins.install = function(Vue, options) {
    // Vue.prototype、Vue.detective、Vue.component、Vue.filter
    Vue.directive(options.name, (element, params) => {
        element.innerHTML = params.value.toUpperCase()
    })
}

export default myPlugins

src/main.js

import Vue from 'vue'
import App from './App.vue'
 
// 引入自定义插件
import myPlugins from './plugins/myPlugins'

Vue.use(myPlugins, {
  name: 'upper'
})
Vue.config.productionTip = false

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

在组件内使用：

<template>
  <div>
    <h1 v-upper='msg'></h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      msg: 'abc'
    }
  },
}
</script>