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

前言

组件在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

Vue.use()官方文档
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

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

使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。
const toast = new toastContrustor();通过new的方式根据组件构造器创建出来一个组件实例。
toast.$mount(document.createElement('div'))将组件对象挂载到某一个元素上。
document.body.appendChild(toast.$el);将元素添加到body中。
Vue.prototype.$toast = toast将toast对象加入到Vue的原型链上，这样在每个页面都可以用this.$toast操作。
将obj对象导出，在main.js中引入，安装，然后就大功告成了，可以在全局中通过一句js代码使用。

最后

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

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

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

前言

需要用的Vue全局API

一，封装一个Toast组件

二， 具体实现

最后

二，具体实现