VUE3 之 插件的使用 - 这个系列的教程通俗易懂，适合新手

1. 概述

老话说的好：起点低不要紧，只要坚持不断的去努力就能取得成功。

 

言归正传，今天我们来聊聊 VUE 中 插件的使用。

 

2. 插件

2.1 插件的声明

     const myPlugin = {
        install(app, options) {
            // 增加一个变量
            app.provide('name', 'lisi');
            // 增加一个自定义指令
            app.directive('my-focus', {
                mounted(element) {
                    element.focus();
                }
            });
            // 增加 mixin
            app.mixin({
                mounted() {
                    console.info("myMixin");
                }
            });

            // 增加全局方法
            app.config.globalProperties.$sayHello = 'say hello';

            // 增加子组件
            app.component('my-body', {
                template: `
                        <h1>body</h1>
                `
            });
        }
    }

通常把通用的部分抽出来，单独写在插件中，在插件中可以增加变量、增加自定义指令、增加 mixin、增加子组件等。

 

2.2 组件与插件绑定

app.use(myPlugin, {name:'zhangsan', age : 35});

在组件与插件绑定时，可以传递参数，在插件中可以通过上面例子的 options 得到这个参数。

 

2.3 在组件中使用插件 

    const app = Vue.createApp({
        
        template:`
            <my-title />
            <my-body />
        `
    });

    app.component('my-title', {
       inject:['name'],
       mounted() {
            console.info(this.$sayHello);
       },
       template: `
            <div>{{name}}</div>
            <div><input v-my-focus ></div>
       `
    });

    // 使用插件
    app.use(myPlugin, {name:'zhangsan', age : 35});

   const vm = app.mount("#myDiv");

插件中声明的 变量、自定义指令、mixin、子组件等，都可以在组件中使用。

 

3. 综述

今天聊了一下 VUE 中 插件的使用，希望可以对大家的工作有所帮助，下一节我们继续讲 Vue 中的高级语法，敬请期待

欢迎帮忙点赞、评论、转发、加关注 ：）

关注追风人聊Java，这里干货满满，都是实战类技术文章，通俗易懂，轻松上手。

 

4. 个人公众号

微信搜索公众号：追风人聊Java，欢迎大家关注