VUE3之其它组件

VUE插件

以对象方式定义一个插件,对象内部必须有install方法,并可以接收app的入参:

export default{
    install(app){
        app.config.globalProperties.$name="shopkeeper";
    }
}

在app中使用use注册:

app.use(pluginObject);

使用方式,created等生命周期、methods等可以获取this的方法中可以直接获取;setup中需要通过getCurrentInstance获取:

        mounted() {
            console.log(this.$name);
        },
        setup(props) {
            const instance = getCurrentInstance();
            console.log("setup",instance.appContext.config.globalProperties.$name);
        }

以函数方式定义一个插件,就相当于定义一个install函数,并接收app入参,以函数方式定义一个注册time-format的directive的功能为例:

// plugins/plugin_function.js
import registerFormat from "../directives/format-time";
export default function(app){
    registerFormat(app);
}
// main.js
mport pluginFunction from './plugins/plugin_function';

const app=createApp(App);
app.use(pluginFunction);
app.mount('#app')

发表评论