初次使用vue开发插件遇到的坑

最新推荐文章于 2022-10-14 16:48:27 发布

原创最新推荐文章于 2022-10-14 16:48:27 发布 · 536 阅读

1 ·

CC 4.0 BY-SA版权

js 同时被 2 个专栏收录

13 篇文章

订阅专栏

vue插件

1 篇文章

订阅专栏

本文详细介绍了如何在Vue项目中创建并使用自定义插件，包括插件的编写、挂载及调用流程，展示了如何通过插件实现弹窗功能，并深入探讨了插件与组件之间的交互方式。

<style lang="less" scoped>
 .alert{
     background: red;
     position: fixed;
     z-index: 9999;
     width: 100%;
     height: 100%;
     left: 0;
     top:0;
 }
</style>
<template>
 <div class="alert"   v-if="showAlert" @click="this.$alertPlugin.hide">
     <div>你好</div>
 </div>
</template>

<script>
 export default {
     data(){
         return {
        //    showAlert:false,
         }
     },
     created(){
       
     },
     mounted(){
  
     },
     props:{
         showAlert:{
             type:Boolean,
             default:false
         }
     },
    //  watch:{
    //      showAlert(val1,val2){
    //           console.log(val1,'val1>>>')
    //             console.log(val2,'val2>>>')
    //      }
    //  }
 }
</script>

以上这是我随便写的一个页面

下面是我写的一个插件

import Alert from './alert.vue'
import Vue from 'vue'
let alert = Vue.extend(Alert)
export default {
    install: function() {
        let alertPlugin = new alert({
            methods: {
                show() {
                    console.log('showAlert in plugin', this.showAlert)
                    this.showAlert = true;
                    console.log('showAlert in plugin', this.showAlert)
                },
                hide() {
                    console.log('关闭了')
                    this.showAlert = false;
                }
            }
        });
        alertPlugin.$mount('#app')//开始忘记写这个插件要挂载哪一个元素上了，坑死了。这个地方一定要记得写啊！
        Vue.prototype.$alertPlugin = alertPlugin;//记得把插件挂载到vue实例上，因为我用的是官方提供的第四种方法来写插件的。其他的三种我没用到。用到了在细细的研究。
    }
}

还有一个最重要的环节，那就是我用用插件的基本流程啊！

在main.js中引入插件使用插件就ok了。
import alertPlugin from '@/components/bussiness/plugin/alertPlugin.js'
Vue.use(alertPlugin)

使用插件

//你就可以在任意的组件中使用插件的方法了。
 this.$alertPlugin.show()
 this.$alertPlugin.hide()