美文网首页
vue插件介绍

vue插件介绍

作者: 手指乐 | 来源:发表于2019-10-09 10:41 被阅读0次
  • 插件和组件的关系
  • 在没有封装组件之前,如果不使用第三方插件,那么很多情况下我们会编写几个常用的组件来提供给页面使用,如Alert/Loading组件,而你可能需要在很多页面中引入并且通过components注册组件,但是像这样使用率很高的组件一般我们希望全局注册后直接就可以在相应页面使用,因此我们需要将他们封装成插件,比如像vux这样的ui组件库,即提供了组件功能也提供了某些全局注册的插件。

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

  • 以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

Vue.use注册插件(对应Vue.componet注册组件),调用插件里的install方法,上例中insall方法里的
Vue.prototype.toast 让每个vue组件有了一个toast属性(此处$toast属性是方法),就可以这样调用:

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

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

相关文章

  • Vue 插件编写

    vue插件介绍 2. 插件分类 主要注册与绑定机制如下: export default{install(Vue...

  • Vue插件

    官网插件地址官网自定义指令参考文章参考文章 一、Vue插件介绍 理解插件与组件 一个Vue插件可以是一堆Vue组件...

  • vue插件介绍

    插件和组件的关系 在没有封装组件之前,如果不使用第三方插件,那么很多情况下我们会编写几个常用的组件来提供给页面使用...

  • Vue 插件编写

    vue插件介绍 2. 插件分类 插件类型 主要注册与绑定机制如下: export default{ instal...

  • Vue学习笔记之四Vue的Ajax请求

    4. Vue的Ajax请求 4.1 Vue-resource插件介绍 下载地址: $.ajax能做的事情,vue-...

  • vue初级入门(vue-resource数据交互并渲染数据到页面

    介绍: vue-resource是Vue.js的插件,它可以通过XMLHttpRequest或JSONP发起请求并...

  • Vue.js知识框架

    vue.js框架介绍 vue-cli脚手架搭建基本代码框架 vue-router官方插件管理路由 vue-reso...

  • Vue-Router探索

    介绍 vue-router是一个vue插件。其实质是在location.hash、location.replace...

  • vue高级用法

    Vue 插件 plugin 1, Vue 插件 plugin 安装 Vue.js 插件。如果插件是一个对象,必须提...

  • 在vue中使用图片懒加载vue-lazyload插件

    在vue中使用图片懒加载vue-lazyload插件 使用方式 使用vue的 vue-lazyload 插件插件地...

网友评论

      本文标题:vue插件介绍

      本文链接:https://www.haomeiwen.com/subject/iyvwpctx.html