Vue之插件的使用

目录

• 作用
• 使用
• 定义全局变量

作用

vue的插件的作用就是为了增强Vue，比如router，比如Vuex
本质就是包含install方法的一个对象，install的第一个参数是vue，第二个及之后的参数是使用都要传递的数据，插件对象中的install方法会被vue自动调用。

使用

1. 在Vue项目的src目录中创建目录plugins,在plugins目录下创建index.js
   

2. 定义插件，内容如下

import Vue from "vue";

export default {
    install(a) {
        console.log('执行了插件', a)
        // 定义指令
        //定义全局指令：跟v-bind一样，获取焦点
        Vue.directive("fbind", {
            //指令与元素成功绑定时（一上来）
            bind(element, binding) {
                element.value = binding.value;
            },
            //指令所在元素被插入页面时
            inserted(element, binding) {
                element.focus();
            },
            //指令所在的模板被重新解析时
            update(element, binding) {
                element.value = binding.value;
            },
        });
    }
}

3. 使用插件，在main.js中添加如下数据

import xxx from '@/plugins'
Vue.use(xxx)

• 上面的效果其实就是按v-bind写了一个插件进行演示插件的使用，效果完全与v-bind相同。
  

定义全局变量

定义全局变量需要使用Vue.prototype方法，一般为了避免与普通变量的值冲突，都使用$字符开头，不但可以定义变量，也可以定义函数。定义之后在任何组件中都可以使用到。

1. 在plugins/index.js中定义

import Vue from "vue";

export default {
    install(vue) {
        // Vue.prototype为方法，$name为变量的名字，为了避免与普通变量的值冲突，所以使用$字符开头
        Vue.prototype.$name = '我来测试全局属性'  // 可以传变量
        Vue.prototype.$plus = (a, b) => {       // 可以传函数
            return a + b
        }
        // 也可以定义混入，定义混入后与之前直接使用混入的不同就是，这里不需要再进行导出了，直接导入插件即可
        Vue.mixin({
            data() {
                return {
                    name: '彭于晏',
                    age: 19,
                };
            },
        });
        // 也可以定义全局组件
        Vue.component(组件内容)
    }
}

2. 在main.js中加载

import xxx from '@/plugins'   // 注意这里的xxx可以随便换成别的名字，与下面的对应就可以了
Vue.use(xxx)                  // 注意这里没有引号