Vue3 插件的定义与使用

作者: 温新

阅读: 3503

时间: 2021-08-12 13:25:11

作者：温新

时间：2021-08-12

hi，我是温新，一名PHPer

定义插件

install(app, params) {}

使用插件

app.use(插件名,参数);

自定义插件案例

<body id="body">
    
    <div id="app">
        {{ webName}}
        <input type="text" v-focus>
    </div>

<script>
    // 自定义插件
    const plug = {
        // 编写插件
        install(app, params) {
            // 扩展一个通用数据
            app.provide('webName',params.webName);
            // 扩展一全局个自定义函数
            app.config.globalProperties.$say = () => {
                return 'PHP'
            },
            // 扩展一个自定义指令
            app.directive('focus', {
                mounted(el){
                    el.focus();
                }
            });
        }
    };

    const app = Vue.createApp({
        inject:['webName'],
        mounted(){
            // 使用自定义函数
            console.log(this.$say());
        }
    });

    //使用插件并传递参数
    app.use(plug,{webName:'自如初'});

    const vm = app.mount('#app');
</script>

</body>

自定义插件对数据表单进行验证

<body>
    <div id="app">
        <form action="">
            名称：<input type="text" name="name" v-model="name">
            年龄：<input type="text" name="age" v-model="age">
        </form>
    </div>

<script>

    const app = Vue.createApp({
      data () {
          return {
              name:'',
              age:''
          }
      },
      rules:{
          name: {
              validate: name => name.length > 6,
              msg:'名字太长'
          },
          age: {
            validate: age => age > 150,
            msg:'非人类'
          }
      }
    });

    // 封装自定义数据验证插件
    const formDataValid = (app, params) => {
        app.mixin({
        created() {
            let rules = this.$options.rules;
            for (let key in rules) {
                let item = rules[key];
                // 监听值是否变化
                this.$watch(key, (value)=>{
                    let result = item.validate(value);
                        if (result) {
                            // 错误信息
                            console.log(item.msg)
                        }
                    });
                }
            }
        });
    }

    // 使用插件
    app.use(formDataValid);

    const vm = app.mount('#app');
</script>

</body>

请登录后再评论