简介

主要介绍Vue插件的概念,定义和使用。

Vue的插件主要是用于增强功能,可以把它看作是一个工具库,可以提供很多强大的功能,比如一些强大的自定义指令,一些强大的工具方法,过滤器等,
我们可以编写或者直接引入别人写的插件,就能获得强大的功能。

Vue插件的本质是一个包含install方法的对象,install方法的第一个参数是Vue构造函数对象,第二个及以后的参数是插件使用者传递的数据。

代码:
在这里插入图片描述
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')

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>

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>

插件:PowerPlugin.js:


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

效果:
在这里插入图片描述
上面的插件只是打印了一下参数,接下来,要做一些看起来有用的东西。
在该插件定义一个自定义指令,之前使用过的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指令:
在这里插入图片描述

效果:
在这里插入图片描述

Logo

前往低代码交流专区

更多推荐