vue插件介绍

1.插件和组件的关系

在没有封装组件之前，如果不使用第三方插件，那么很多情况下我们会编写几个常用的组件来提供给页面使用，如Alert/Loading组件，而你可能需要在很多页面中引入并且通过components注册组件，但是像这样使用率很高的组件一般我们希望全局注册后直接就可以在相应页面使用，因此我们需要将他们封装成插件，比如像vux这样的ui组件库，即提供了组件功能也提供了某些全局注册的插件。

用一句话简单概括两者的关系就是：插件可以封装组件，组件可以暴露数据给插件。

 

2.以vux的alert组件为例

如果直接使用组件，要这样使用

<template>
  <div id="app">
    <input type="button" @click="buy" value="保存">
    <alert v-model="is_alert" 
           title="商城提醒你：" 
           :content="alertContent"
           @on-hide="hide"
           >
    </alert>
  </div>
</template>

<style>
    
</style>
    
<script>
import {Alert} from 'vux';
export default {
  components: {
    Alert
  },
  data(){
      return {
          is_alert: false,
          alertContent: ""
      }
  },
  methods: {
      hide() {
          alert('弹窗关闭了！');
      },
      buy() {
          //alert("fdsf")
          // 当点击购买时，将弹出框的显示值设置为 true
          this.is_alert = true
          this.alertContent = '保存成功！'
      }      
  }
}
</script>

如果使用插件，这样即可：
https://www.cnblogs.com/cowboybusy/p/11026793.html

 

插件类似是这样开发的：

toast.vue是一个toast组件，

Toast.js是封装了这个组件的插件

Toast.js

import ToastComponent from './toast.vue'

const Toast = {};

// 注册Toast
Toast.install = function (Vue) {
    // 生成一个Vue的子类
    // 同时这个子类也就是组件
    const ToastConstructor = Vue.extend(ToastComponent)
    // 生成一个该子类的实例
    const instance = new ToastConstructor();

    // 将这个实例挂载在我创建的div上
    // 并将此div加入全局挂载点内部
    instance.$mount(document.createElement('div'))
    document.body.appendChild(instance.$el)
    
    // 通过Vue的原型注册一个方法
    // 让所有实例共享这个方法 
    Vue.prototype.$toast = (msg, duration = 2000) => {
        instance.message = msg;
        instance.show = true;

        setTimeout(() => {
            
            instance.show = false;
        }, duration);
    }
}

export default Toast

具体参考文章：

https://blog.csdn.net/u012230055/article/details/82898245

 

Vue.use注册插件（对应Vue.componet注册组件），调用插件里的install方法，上例中insall方法里的

Vue.prototype.$toast

 

让每个vue组件有了一个$toast属性（此处$toast属性是方法），就可以这样调用：

methods: {
    toast() {
      this.$toast("你好");
    }
  }

 

vux里面使用插件的方式也跟这个类似