Vue.use的来由与用法(创建插件,注册插件并全局使用的基本玩法)

Vue.use:它是Vue提供一个静态方法，用来向Vue注册插件(增强vue的功能)。

用法示例:

Vue.use(VueRouter)
Vue.use(Vuex)
Vue.use(vant)

说明:

1. Vue.use 可以接收一个对象，Vue.use(obj)

2. 对象obj中需要提供一个 install 函数

3. 在 Vue.use(obj) 时，会自动调用该 install 函数，并传入 Vue构造器

探究过程:首先,在main.js中的obj对象里面有个install方法,它传进去的参数就是Vue这个对象

const obj = {
    install(p) {
        console.log('install..', p, p===Vue)  // install..  vue对象 true
    }
}

Vue.use(obj)

 此时,这个obj对象就是我们创建的一个插件

那我们可以将某些业务需求添加到这个插件中

const obj = {
    install(p) {
        console.log('install..', p, p===Vue)  // install..  vue对象 true

+       p.prototype.hhh = 666
    }
}

Vue.use(obj)

这样,我们就可以在所有的组件当中找到  hhh 这个属性,值为  666

创建一个hhh.vue组件:

<template>
    <div>
    </div>
</template>

<script>
    export default {
        created() {
            console.dir(this)
            console.log(this.hhh) // 666
        }
    }
</script>

在控制台中找dir打印出来的顶级对象vue的原型链,一直找到object里面有一个hhh属性,值为666

所以,我们还可以在这个创建的p对象(也就是Vue对象)上挂更多的东西,比如函数,比如对象,对象当中也可以调用组件,组件里面也可以写html,css,js,只是Vue.use用来使用的插件一般体积较大,如果使用体积小的组件,只需用更加方便对口的Vue.component.

类似的,Vue.component就是组件专属的用法.插件与组件的区别:

插件: 智能设备

组件：iphone手机

一个插件里面不一定有组件,而组件一定是插件.包含但不充分