十分钟带你了解：vue插件（建议收藏）

以下内容请您耐心看完！
特别提示，一定看到最后《最后有彩蛋！》

插件：

通常用来为 Vue 添加全局功能。
Vue的插件主要是用于增强功能，可以把它看作是一个工具库，可以提供很多强大的功能，比如一些强大的自定义指令，一些强大的工具方法，过滤器等，

以下我以图片和代码的形式来带大家认识Vue插件

1，main.js：在这里使用定义的插件。

//引入vue依赖
import Vue from 'vue'
//引入组件App
import App from './App.vue'

// 关闭生产提示
Vue.config.productionTip = false

//引入插件
import PowerPlugin from "./plugins/PowerPlugin"

//使用插件，使用Vue.use函数，第一个参数传引入的插件对象，第二个及以后就是用户传到插件定义的intsall方法的参数。
//调用Vue.use函数使用插件，会调用该插件的install方法。
Vue.use(PowerPlugin,"yehaocong","liaoxiaoyan")

//创建一个vue实例
new Vue({
  render: h => h(App),

  //配置该vue实例管理id为app的容器
}).$mount('#app')

2，App.vue：

<template>
    <!-- 编写结构 -->
    <div>
    <!-- 父组件编写组件标签时，将数据以属性的方式进行传递。 -->
    <student studentName="Yehaocong" :studentAge="25" :hobby="['篮球','听音乐']"></student>
    <student studentName="Liaoxiaoyan" :studentAge="21" :hobby="['逛淘宝','唱歌']"></student>
    </div>
</template>

<script>

import student from "./components/Student.vue"

export default {


    components:{
        //注册组件
        student
    }
}
</script>

<style>

</style>

3，Student.vue

<template>
    <!-- 编写组件结构代码，也就是html代码 -->
    <!-- 需要一个div括住，也就是只能有一个根元素，一般使用div -->
    <div class="orange">
        <div>学生姓名：{{studentName}}</div>
        <div>年龄：{{studentAgeInData+1}}</div>
        <div>爱好：{{hobby}}</div>
        <button @click="addAge">修改年龄+1</button>
    </div>
</template>

<script>
//交互代码编写的地方，需要暴露出去给其他地方引入
//这个需要有一点es6模块化的知识，这里一般使用默认暴露，因为这是单文件组件，只需要暴露一个组件对象，
//并且引入默认暴露的组件引入语法比较简单。
export default {
    data() {
        return {
           //复制一份年龄数据到data中
           studentAgeInData:this.studentAge 
        }
    },
    methods:{
        addAge(){
            //修改的是data中的年龄数据
            this.studentAgeInData = this.studentAgeInData+1;
        }
    },
    
    //简便写法,用于接收父组件传递过来的数据
    //数组形式，里面声明属性名称即可
    props:["studentName","studentAge","hobby"],

    //第二种方式props写出对象的形式，属性名是接收的属性名，属性值是该属性的类型。
    // props:{
    //     studentName:String,
    //     studentAge:Number,
    //     hobby:Array
    // }

    //第三种方式：也是对象形式，但是里面的属性声明也使用对象形式。
    //可以限制类型、设置默认值、设置必须
    // 必须与设置默认值通常只能出现一个，因为必须传递就代表没有默认值了，因为默认值只是在父组件没有传递该属性时才使用
    // props:{
    //     studentName:{
    //         //设置类型
    //         type:String,
    //         //设置必须
    //         required:true
    //     },
    //     studentAge:{
    //         type:Number,
    //         //设置默认值为99
    //         default:99
    //     },
    //     hobby:{
    //         type:Array
    //     }
    // }
}
</script>

<style>
    /* 编写样式的地方 */
    .orange{
        background-color: orange;
    }
</style>

4，插件：PowerPlugin.js：

//编写插件的实质是编写一个含有install方法的对象，并暴露出去，
export default {
    //install方法的第一个参数是Vue构造函数对象，之后的参数是插件使用者传过来的参数。
    install(Vue,p1,p2){
        console.log(Vue);
        console.log(p1);
        console.log(p2);
    }
}

5，效果：

上面的插件只是打印了一下参数，接下来，要做一些看起来有用的东西。
在该插件定义一个自定义指令，之前使用过的v-big指令吧，主要是能让数字乘10。

PowerPlugin修改为：

//编写插件的实质是编写一个含有install方法的对象，并暴露出去，
export default {
    //install方法的第一个参数是Vue构造函数对象，之后的参数是插件使用者传过来的参数。
    install(Vue,p1,p2){
        console.log(Vue);
        console.log(p1);
        console.log(p2);

        //这里定义一个全局自定义指令
        Vue.directive("big",function(element,binding){
            element.innerText = binding.value*10;
        })
    }
}

在Student组件中使用在插件中定义的big指令：

效果：

接下来带你来看 《史上最全的vue插件库》