Javascript

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插件的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!