Vue中使用插件

插件的作用是增强Vue。
插件的本质是一个对象，且是一个具有install方法的对象。
install方法的第一个参数是Vue对象，第二个及以后的参数是开发者自定义传入的。

install方法的第一个参数是Vue，所以 自定义指令（Vue.directive()）、自定义过滤器 (Vue.filter())、自定义混入（Vue.mixin()）都可以在写在install方法里。看个具体的例子。

• myPlugin.js，定义了插件。
  插件的install方法中，
  自定义了指令：v-fbind，指令功能类似于v-bind，且输入框自动获得焦点。
  自定义了过滤器：slicer，只截取了原字符串的前4个字符。
  自定义了混入：使得每个组件都有{x:100,y:100}这两个数据。

export default {
    install(Vue,a,b){
        console.log("installing myPlugin",a,b);

        Vue.directive("fbind",{
            bind(element,binding){
                element.value = binding.value;
            },
            inserted(element,binding){
                element.value = binding.value;
                element.focus();
            },
            update(element,binding){
                element.value = binding.value;
                element.focus();
            }
        })

        Vue.filter("slicer",function(value){
            return value.slice(0,4)
        })

        Vue.mixin({
            data(){
                return {
                    x:100,
                    y:200
                }
            }
        })
    }
}

• App.vue，定义了顶层组件App。

<template>
    <Company/>
</template>

<script>
import Company from "./components/Company";
export default {
    name:"App",
    components:{
        Company
    }
}
</script>

• Company.vue，定义了组件Company。
  组件实现中，使用了上面自定义的指令v-fbind、过滤器slicer和混入。

<template>
  <div>
      <h2>公司名称：{{name}}</h2>
      <h2>公司地址：{{address}}</h2>
      <h2>裁剪后的公司名称：{{ name | slicer}}</h2>
      <input type="text" v-fbind="name">
  </div>
</template>

<script>
export default {
    data(){
        return {
            name:"五哈科技有限公司",
            address:"上海宝山"
        }
    }
}
</script>

• main.js，入口文件，使用了插件。
  通过Vue.use()引入插件。
  同时可以看到，Vue.use的第二、第三个参数是开发者自定义传入的，它们将成为插件install方法的第二个、第三个参数。

import Vue from "vue";
import App from "./App";
import myPlugin from "./myPlugin";

Vue.config.productionTip = false;

Vue.use(myPlugin,"hello","world");

new Vue({
  el:"#app",
  render: h => h(App)
})

最后，npm run serve 启动应用，访问地址localhost:8080。