如何实现一个全局复用的自定义组件？

前言

组件在vue开发中是必不可少的，若是一个组件在多个页面中都须要使用，那么每次都要引入，注册，使用，仍是有点繁琐的。因此对那些要频繁使用的咱们要实现一次引入，全局使用。

本文就带你了解自定义一个全局复用的组件(Toast)，在main.js中引用组件，之后只要在须要的页面上写一句js代码便可实现效果。

先看看效果

监听点击事件。

methods: {
    click() {
      this.$toast.show("home你好啊")   //实现toast弹窗
    }
  }
复制代码

咱们看看页面的结构

当咱们点击按钮执行语句 this.$toast.show("home你好啊")， 就会动态去除 display:none; 默认信息也会改成咱们调用show函数时传递的 参数。

咱们要用到toast组件的时候，直接经过this.$toast调用show()方法，第一个参数是要显示的信息，第二参数是toast持续的时间(不传参数默认了1.5s)。

咱们怎么将组件挂载到dom结构的呢？

简单来讲就是用Vue.extend()建立一个子类，而后挂载到dom上。

须要用的Vue全局API

1. Vue.use()官方文档
2. Vue.extend()官方文档

一，封装一个Toast组件

<template>
  <div class="toast" v-show="isNone">
    <div >{{message}}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '默认信息',
      isNone: false
    }
  },
  methods: {
    show(message='默认信息', duration = 1500) {  //默认参数
      this.message = message;
      this.isNone = true;
      setTimeout(() => {  //用定时器实现弹窗出现时间
        this.isNone = false;
        this.message = '默认信息'
      }, duration)
    }
  }
}
</script>

<style scoped>
  .toast {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 10px 8px;
    z-index: 999;
    color: #fff;
    background-color: rgba(0, 0, 0, .5);
    border-radius: 10px;
  }
</style>
复制代码

结构很简单，经过属性isNone来动态控制Toast的出现和隐藏。

主要是show方法，当页面调用show方法，第一个参数会赋值给message,第二个参数能够决定Toast存在的时间(用定时器将isNone改成false)。

二， 具体实现

main.js

import Toast from './components/toast/index'

Vue.use(Toast)  //安装toast插件
复制代码

看到这，首先咱们要了解Vue.use这api具体作了啥?

其实就是调用插件的install方法().

安装 Vue.js 插件。若是插件是一个对象，必须提供 install 方法。若是插件是一个函数，它会被做为 install 方法。install 方法调用时，会将 Vue 做为参数传入。

因此如今就要封装install方法。

components/toast/index.js

import Toast from './Toast'

const obj = {}  //对象

obj.install = function(Vue) {  //封装install方法
  // 1. 建立组件构造器
  const toastContrustor = Vue.extend(Toast)

  // 2. new  组件实例
  const toast = new toastContrustor();

  // 3. 将组件实例， 挂载到某一个元素上
  toast.$mount(document.createElement('div'))

  // 4. toast.$el 对应的就是div
  document.body.appendChild(toast.$el);
    
  // 5. 添加到原型链上
  Vue.prototype.$toast = toast
  
}

export default obj
复制代码

1. 先将封装好的Toast组件引入。
2. 定义一个对象obj(将这个对象导出到main.js中安装)。
3. 刚刚咱们了解了Vue.use插件是一个对象的话，必须提供install方法，因此封装对象obj的install方法。
4. const toastContrustor = Vue.extend(Toast)先经过Vue.extend建立组件构造器。(install方法调用时，会将 Vue 做为参数传入)

   使用基础 Vue 构造器，建立一个“子类”。参数是一个包含组件选项的对象。

5. const toast = new toastContrustor();经过new的方式 根据组件构造器建立出来一个组件实例。
6. toast.$mount(document.createElement('div'))将组件对象挂载到某一个元素上。
7. document.body.appendChild(toast.$el);将元素添加到body中。
8. Vue.prototype.$toast = toast将toast对象加入到Vue的原型链上，这样在每一个页面均可以用this.$toast操做。
9. 将obj对象导出，在main.js中引入，安装，而后就大功告成了，能够在全局中经过一句js代码使用。

最后

文章有错误的地方或者能够改进的地方，欢迎各位大佬提提意见。

这是源代码，若是本文对你有点帮助的话，不妨点个赞哦。