Vue plugin 插件

Vue plugin 插件

插件用于增强Vue
插件本质上是一个具有install方法的对象，install方法中可以拿到一个Vue实例和一个使用者传递的options作为参数，在这个方法里去增强

定义插件
export const myPlugin = {install(Vue,options){}}

使用插件
Vue.use(myPlugin)

案例

plugin.js

export const myPlugin = {
    install(Vue) {
        Vue.directive('focus', {
            inserted(el,bindings){
                el.value = bindings.value
                el.focus()
            }
        })
    }
}

main.js

import Vue from 'vue'
import App from './App.vue'
import { myPlugin } from './plugins'

Vue.config.productionTip = false

// 使用插件
Vue.use(myPlugin, { has: true })

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

demo.vue

<template>
  <div>
    <span >{{ msg }}</span>
    <input type="text" v-focus="msg">
  </div>
</template>

<script>
export default {
  data: () => ({}),
  props: ["msg"],
};
</script>