vue2.x之插件

插件其实就是vue的增强功能。通常用来为 Vue 添加全局功能。

常见功能

一般有下面几种功能

添加全局方法或者 property。如: vue-custom-element
添加全局资源: 指令/过滤器/过渡等。如 vue-touch
通过全局混入来添加一些组件选项。如 vue-router
添加 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现。
一个库，提供自己的 API，同时提供上面提到的一个或多个功能。如 vue-router

定义插件

开发插件也叫定义插件，主要是通过install方法来暴露的，参数：vue实例和可选的自定义参数。不论你在install中写什么vue都会帮你执行。

export default {
  install: function(Vue) { //这里用到了vue实例，可选的自定义参数未定义
    console.log('Vue', Vue);
    // 1. 添加全局方法或 property  
    Vue.myGlobalMethod = function () {  
      console.log('这是插件的全局方法');
    }  

    // 2. 添加全局资源  
    Vue.directive('my-directive', {  
      bind (el, binding, vnode, oldVnode) {  
        console.log('这是插件的全局指令'); 
      }   
    })  

    // 3. 注入组件选项  
    Vue.mixin({  
      created: function () {  
        console.log('这是插件的混入');
      }   
    })  

    // 4. 添加实例方法  
    Vue.prototype.$myMethod = function (methodOptions) {  
      console.log('这是插件的实例方法');
    }
  }
}

因为第一个参数是Vue实例，因此我们可以根据自己的需求在install方法中添加很多我们需要在全局实现的功能。

👀 其实这个属性都是我们之前学习到的，只是把它们整合在一起。

使用插件

使用插件分为两种情况，全局引入和组件局部引入。

1. 全局引入

⏰ 在main.js中引入并使用

import Vue from 'vue'
import App from './App.vue';
import plugin from './plugins/index';

Vue.config.productionTip = false;
Vue.use(plugin);
new Vue({
  render: h => h(App),
}).$mount('#app')

^{❗️重点是引入之后再使用use绑定到Vue上。}

⏰ 在组件中使用

<button @click="myGlobalMethod">点我打印信息</button>
### <button @click="$myMethod">点我查看实例方法</button>

因为myGlobalMethod是绑定在Vue实例（不是vueComponent）上，但是click属性是在vueComponent实例上，所以不能直接绑定，不然浏览器会报错。

需要换成下面这种用法

<template>
  <div class="hello">
    <div v-my-directive></div>
    <button @click="clickFunc">点我打印信息</button>
    <button @click="myMethod">点我查看实例方法</button>
  </div>
</template>

<script>
import mixin from '../mixin/data';
import Vue from 'vue';
export default {
  name: 'HelloWorld',
  mixins: [mixin],
  data() {
    return {
      name: '女儿',
      msg: {
        name: '张雨彤',
        title: '我是乖乖女'
      }
    }
  },
  created() {
    console.log('组件的created');
  },
  methods: {
    clickFunc() {
      Vue.myGlobalMethod();
    },
    myMethod() {
      this.$myMethod();
    }
  }
}
</script>

效果如下：

2. 组件局部引用

组件局部引用就不需要在main.js中引入了，只需要在组件中引用即可。

<template>
  <div class="hello">
    <div v-my-directive></div>
    <button @click="clickFunc">点我打印信息</button>
    <button @click="myMethod">点我查看实例方法</button>
  </div>
</template>

<script>
import mixin from '../mixin/data';
import Vue from 'vue';
import plugin from '../plugins/index';
export default {
  name: 'HelloWorld',
  mixins: [mixin],
  data() {
    return {
      name: '女儿',
      msg: {
        name: '张雨彤',
        title: '我是乖乖女'
      }
    }
  },
  created() {
    Vue.use(plugin)
    console.log('组件的created');
  },
  methods: {
    clickFunc() {
      Vue.myGlobalMethod();
    },
    myMethod() {
      this.$myMethod();
    }
  }
}
</script>

效果如下：

❗️ 局部引入插件的时候要注意你想使用插件中的哪些方法，这些方法都是在什么时候调用的，需要放在合适的生命周期中才能得到想要的效果。

loading插件写法

目录结构：

1.loading组件

⏰ nwd-loading.vue

<template>
    <div class="nwd-loading" v-show="show">
        <div>{{text}}</div>
    </div>
</template>

<script>
    export default {
        props: {
            show: Boolean,
            text: "正在加载中..."
        }
    }
</script>

2.封装插件

⏰ index.js

import NwdLoadingComponent from './nwd-loading'

let $vm;

export default {
    install(Vue,options) {
        if(!$vm) {
            const NwdLoadingPlugin = Vue.extend(NwdLoadingComponent);
            $vm = new NwdLoadingPlugin({
                    el: document.createElement('div')
                });
        }
        $vm.show = false;
        let loading = {
                    show(text) {
                        $vm.show = true;
                        $vm.text = text;
                        document.body.appendChild($vm.$el);
                    },
                    hide() {
                        $vm.show = false;
                    }
                };
                if (!Vue.$loading) {
                    Vue.$loading = loading;
                }
                // Vue.prototype.$loading = Vue.$loading;
                Vue.mixin({
                    created() {
                        this.$loading = Vue.$loading;
                    }
                })
    }
}

👀 注释：

通过Vue.extend()方法创建了一个构造器NwdLoadingPlugin，其次我们再通过new NwdLoadingPlugin() 创建了实例$vm，并挂载到一个div元素上。

最后我们需要通过document.body.appendChild($vm.$el)将其插入到DOM节点中。当我们创建了$vm实例后，我们可以访问该实例的属性和方法，比如通过$vm.show就可以改变NwdLoadingComponent组件的show值来控制其显示隐藏。

最终我们通过Vue.mixin或者Vue.prototype.$loading来全局添加了$loading事件，其又包含了show和hide两个方法。我们可以直接在页面中使用this.$loading.show()来显示加载，使用this.$loading.hide()来关闭加载。

3.使用插件

⏰ main.js

import NwdLoading from '@/components/nwd-loading/index.js'

Vue.use(NwdLoading)

4. 调用插件

⏰ .vue 组件

export default {
     created() {
         this.$loading.show("loading内容")
     }
 }

posted on 2024-07-10 15:57 梁飞宇阅读(29) 评论(0) 收藏举报

刷新页面返回顶部

梁飞宇