vue 自定义插件

最近要在乾坤袋里面加开发三个全局组件，所以来学习下这部分的知识~

（一）插件和组件的区别

组件：是对 某功能 或者 某模块 的封装 （比如 loading、toast 等）

插件：是对一系列组件的封装 （比如 vuex、vue-router），插件里面可以有很多组件

插件与组件的关系：

插件可以封装组件，组件暴露数据给插件

（二）插件的优点

1. 开箱即用

2. 功能比组件更强大、更丰富

3. 一次引入、终生受益

4. 打包带走、随走随用 （比如vue、react 都可使用等等）

（三）vue 插件分类

1. 添加全局方法或者属性 (如vue-element）

2. 添加全局资源：指令/过滤器/过渡等，如 vue-touch

3. 通过全局 main 方法 添加一些组件选项，如 vuex

4. 添加 Vue 实例方法，通过把他们添加到 Vue.prototype 上面实现

(四) 用到的语法

Vue.component  用于生成全局组件， 它接受两个参数

Vue.component('组件名称', 组件)

这让我想到了 前两天刚刚在Vue原型上挂载过全局组件，

详情见文章：https://blog.csdn.net/Luckyzhoufangbing/article/details/108076599

但当时使用的指令是 Vue.extend，所以这两个指令有什么区别呢？

在官方文档上看到了这样一句话：

Vue.component('my-component', Vue.extend({ /* ... */ }))

总结：

1. Vue.extend 是构造一个组件的语法器，你给它参数 他给你一个组件

2. 区别参考这篇文章：https://www.cnblogs.com/battle-wang/p/9673577.html

3. 

 

前几天的博客就是使用第二种方法实例化的

4. 创建实例构造器 （Vue.extend）---> 构造器实例化 （Vue.component）

（五）自定义一个 toast 全局组件

toast.vue

<template>
  <div v-show="isShow" class='wrapper'>{{ message }}</div>
</template>

<script>
export default {
  name: 'Toast', // 全局注册必须要有name
  data () {
    return {
      isShow: false,
      message: '',
      timer: null
    }
  },
  methods: {
    show (mes, showTime = 3000) {
      this.message = mes
      this.isShow = true
      this.timer = setTimeout(() => {
        this.isShow = false
        clearInterval(this.timer)
      }, showTime)
    }
  }
}
</script>

<style scoped>
.wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 5rem;
  line-height: 0.35rem;
  white-space: wrap;
  padding: 0.25rem;
  border-radius: 6px;
  color: #fff;
  font-size: 0.18rem;
  background: rgba(0,0,0, 0.8)
}
</style>

Toast.js

import Vue from 'vue'
import Toast from './Toast.vue' // 引入组件
Toast.install = function () {
  Vue.component(Toast.name, Toast)
}

export default Toast

main.js

import Toast from './common/toast/Toast.js'
Vue.use(Toast)

使用：

<template>
  <div id="app">
    <div @click="tab">111</div>
    <Toast ref="tip" />
  </div>
</template>

<script>
export default {
  methods: {
    tab () {
      this.$refs.tip.show('111')
    }
  }
}
</script>

<style lang="scss">
</style>