Vue强大的插件功能，你也可以自定义实现想要功能！

插件定义

插件通常用来为 Vue 添加全局功能。

插件的功能范围没有严格的限制——一般有下面几种：

添加全局方法或者 property。如：vue-custom-element

添加全局资源：指令/过滤器/过渡等。如 vue-touch

通过全局混入来添加一些组件选项。如 vue-router

添加 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现。

一个库，提供自己的 API，同时提供上面提到的一个或多个功能。如 vue-router

——以上内容摘至 Vue 官网

定义插件

plugins.js文件内容

export default {
    
    
    install(Vue){
    
    
        //全局过滤器,只保留value的前三位
        Vue.filter('defineSlice',function (value) {
    
    
            return value.slice(0,3)
        })

        //定义全局指令,在bind指令所实现的内容基础上,增加自动获取焦点的功能
        Vue.directive('definebind',{
    
    
            //指令与元素成功绑定时（一上来）
            bind(element,binding){
    
    
                element.value = binding.value
            },
            //指令所在元素被插入页面时
            inserted(element,binding){
    
    
                element.focus()
            },
            //指令所在的模板被重新解析时
            update(element,binding){
    
    
                element.value = binding.value
            }
        })

        //定义混入
        Vue.mixin({
    
    
            data(){
    
    
                return {
    
    
                    province:"hubei",
                    city:"wuhan"
                }
            }
        })

        //给Vue原型上添加一个方法(vm和vc就都能用了)
        Vue.prototype.hello_world = ()=>{
    
    alert('你好，世界！')}
    }
}

使用插件

1. 注册插件

main.js文件内容

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//引入插件
import plugins from "./plugins"
//关闭Vue的生产提示
Vue.config.productionTip = false

//应用(使用)插件
Vue.use(plugins)

//创建vm
new Vue({
    
    
    el:'#app',
    render: h => h(App)
})

注意：

(1). 先在main.js文件中使用import plugins from "./plugins"语句导入插件plugins

(2). 再使用Vue.use(plugins)进行全局注册插件

2. City.vue 组件使用插件 definebind 指令

City.vue组件内容

<template>
    <div>
        <h2>城市名称：{
    
    {
    
    name}}</h2>
        <input type="text" v-definebind:vaule="name">
    </div>
</template>

<script>
    export default {
    
    
        name:'City',
        data() {
    
    
            return {
    
    
                name: 'wuhan'
            }
        }
    }
</script>

注意：

在组件内部具体使用插件定义的功能时，需要使用v-definebind的形式，与 Vue内置的v-bind指令是同样的使用方法，切记不能直接通过definebind的形式使用。

3. Province.vue 组件使用插件 defineSlice & hello_world 方法

Province.vue组件内容

<template>
   <div>
       <h2>省份名称：{
     
     {
     
     name | defineSlice}}</h2>
       <button @click="test">点我测试插件实现的hello_world方法</button>
   </div>
</template>

<script>
   export default {
     
     
       name:'Province',
       data(){
     
     
           return {
     
     
               name: 'hubei'
           }
       },
       methods: {
     
     
           test(){
     
     
               this.hello_world()
           }
       }
   }
</script>

注意：

页面上展示的省份名称是被defineSlice截取过的，最终只展示前三个字符：‘hub’
点击button按钮，会弹框提示：你好，世界！

小结

1.因为plugins.js文件中定义了mixin混合，且整个plugins.js是在main.js文件中进行了全局注册

所以每个组件的data 配置项下都会有province:"hubei", city:"wuhan"两个属性值，如果相同的属性名，则以组件内部自定义的为准。

2.插件本质是用于增强Vue，包含install方法的一个对象，install的第一个参数是Vue,第二个以后的参数是插件使用者传递的数据。

插件的使用步骤如下：

定义插件
注册插件
使用插件

欢迎关注无量测试之道公众号，回复领取资源

Python+Unittest框架API自动化、

Python+Pytest框架API自动化、

Python+Pandas+Pyecharts大数据分析、

Python+Selenium框架Web的UI自动化、

Python+Appium框架APP的UI自动化、

Python编程学习资源干货、

Vue前端组件化框架开发、

资源和代码免费送啦~

包含：数据分析、大数据、机器学习、测试开发、API接口自动化、测试运维、UI自动化、性能测试、代码检测、编程技术等。

微信搜索公众号：无量测试之道，添加关注，让我们一起共同成长 !