Vue插件的简单封装与使用（Toast插件）

一、组件和插件的区别与联系

区别

组件的使用频率往往大于插件
组件的作用范围往往小于插件

联系

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

二、 创建目录结构并初始化插件

└── components
 └── toast
  ├── Toast.vue
  └── index.js
  
Toast.vue：

<!-- Toast.vue -->
<template>
  <div class="toast" v-show='isshow'>
    <div>{
   
   {message}}</div>
  </div>
</template>

<script>
export default {
     
     
  name: 'Toast',
  data(){
     
     
    return {
     
     
      message: '',
      time: 2000,
      isshow: false
    }
  },
  methods: {
     
     
    show (message, time=1000) {
     
     
      this.isshow = true
      this.message = message
      setTimeout(() => {
     
     
        this.isshow = false
        this.message = ''
      }, time)
    }
  }
}
</script>

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

index.js（组件初始化）：

import Toast from './Toast'
const obj = {
    
    }
obj.install = function (Vue) {
    
     
  // 1.创建组件构造器
  const toastConstructor = Vue.extend(Toast)
  // 2.new的方式 根据组件构造器，可以创建出来一个组件对象
  const toast = new toastConstructor()
  // 3.将组件对象 手动挂载到某一个元素上
  toast.$mount(document.createElement('div'))
  // 4.toast.$el对应的就是div
  document.body.appendChild(toast.$el)
  Vue.prototype.$toast  = toast
}
export default obj

1、Vue.extend作用是组装组件的构造方法VueComponent
2、new toastConstructor ()是实例化组件实例。实例化构造方法，只是对组件的状态数据进行了初始化，并没有解析组件的template，也没有后续的生成vnode和解析vnode
3、instance.$mount(document.createElement('div'))的作用是解析模板文件，生成render函数，进而调用createElement生成vnode，最后生成真实DOM,将生成的真实DOM挂载到实例instance的$el属性上，也就是说，实例instance.$el即为组件实例化最终的结果。
4、组件中，props属性最终会声明在组件实例上，所以直接通过实例的属性，也可以响应式的更改属性的传参。

三、在main.js中安装组件

import Toast from '@/components//toast/index.js'
Vue.use(Toast)

四、使用插件

在其他组件中可以 直接通过 $toast使用插件

<template>
  <div id="app">
    
    <img src="@/assets/logo.png" alt="" @click="showToast">

  </div>
</template>

<script>
export default {
     
     
  methods: {
     
     
    showToast(){
     
     
      this.$toast.show('hello Vue', 2000)
    }
  }
};
</script>