Vue中插件的使用-学习笔记

插件的两种写法

object写法
代码:

export default{
    install(app){
        console.log(app);
        //向app添加全局属性name
        app.config.globalProperties.$name = "coderwzx";
    }
}

function写法
代码:

export default function(app){
    console.log(app);
    //向app添加全局属性name
    app.config.globalProperties.$name = "coderwzx";
}

在vue的入口js文件中使用插件

import { createApp } from 'vue'
import pluginObject from './Vue使用插件/plugins/plugin_object.js';
import pluginFunction from './Vue使用插件/plugins/plugin_function.js';

import App from './Vue使用插件/App.vue';
const app = createApp(App)

app.use(pluginObject);
app.use(pluginFunction);

app.mount('#app');

插件中添加组件的全局属性

在使用插件时，对应创建的组件dom（app）将会被传入插件，我们可以使用：

app.config.globalProperties.$name = ‘wzx’;

为app创建全局的name属性。

组件Vue代码
代码：

<template>
    <div>

    </div>
</template>

<script>
    import { getCurrentInstance } from 'vue';
    export default {
        setup(){
            /* vue中的getCurrentInstance方法可以获取组件实例 */
            const instance = getCurrentInstance();
            console.log(instance.appContext.config.globalProperties.config);
        }
    }
</script>

<style scoped>

</style>

在组件中我们想要掉用这个name属性时，通过使用vue的getCurrentInstance先获取组件的实例。之后调用实例的appContext下的config.globalProperties.$name获取name属性。