vue插件

本文主要是介绍vue插件，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

通常向vue全局添加一些功能时，会采用插件的模式，有两种编写方式：

对象类型：一个对象，但是必须包含一个install的函数，该函数会在俺咋混个插件时执行

函数类型：一个function，这个函数会在安装插件时自动运行

插件可以完成很多功能，没有限制，一下几种都是可以的：

1. 添加全局方法或者property，通过把他们添加到config.globalProperties上实现；
2. 添加全局资源：指令、过滤器、过渡等；
3. 通过全局mixin来添加一些组件选项；
4. 一个向外提供api的库，同时提供上面的一个或者多个功能

定义一个pluginObject.js文件

export default{
    // 必须有install函数
    install(app){
        console.log(app,'app')
    }
}

在mian.js文件中引用

import { createApp } from 'vue'
import App from './App.vue'
import pluginObject from './pluginObject'
app.use(pluginObject)
const app=createApp(App)
app.mount('#app')

在main.js中使用use使用插件，内部会自动安装插件，内部会执行install这个函数，并且把app传入了进去

 我们可以在app中的config配置中，找到globalProerties全局属性添加一些东西

 app.config.globalProperties.$name="tom"

 

 

 接下来就可以在其他文件中使用这个属性

在vue2中就可以这样得到

mounted(){
           console.log(this.$name)
       }

 

 

 在vue3中没有this，所以我们需要从vue中引入getCurrentInstance，这个方法可以拿到当前的组件实例

首先获取当前组件的实例

<script>
import {getCurrentInstance} from "vue"
    export default {
       setup(){
          //拿到组件实例 
           const instance=getCurrentInstance()
           console.log(instance,'instance')
           return {}
       }
    }
</script>

 

 所以此时可以这样写

 console.log(instance.appContext.config.globalProperties.$name,'instance')

 

 也可以使用函数插件

export default function(app){
    console.log(app,'app')
}

在main.js中引用

import { createApp } from 'vue'
import App from './App.vue'
import pluginFunction from './function.js'
const app=createApp(App)
app.use(pluginFunction)
app.mount('#app')

 

 可以看到跟对象式使用方法一样

 

这篇关于vue插件的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！