Vue 组件的高级封装模式

一、传统模式

我们在使用 vue 进行项目开发过程中，对组件的封装是不可避免的，组件式开发在很大程度上提高了代码的复用性，能够提高开发效率。一般情况下，我们使用最基础的封装模式，基本流程如下：

1. 创建 Xxx.vue 文件，对组件进行封装
2. 通过 import 的方式将组件导入 import Xxx  from  '...'
3. 对组件进行注册 componments:{ Xxx } 
4. 使用组件：

示例：封装一个 Toast 弹窗组件

1.创建 Toast.vue 文件

2.导入组件

import Toast from 'components/common/toast/Toast'

3.注册组件

export default {
  name:"Detail",
  components:{
    Toast
  }
}

4.使用组件

运行效果：

这种封装模式在使用起来比较麻烦，主要体现在组件的导入、注册和使用方面，特别是涉及到不同组件之间的控制和使用，需要组件之间进行各种通信。

二、高级模式

组件封装的高级模式：通过插件安装的方式对组件进行封装。在使用时只需要一次调用即可：

this.$toast(message,1000)

具体步骤如下：

1.创建组件 Toast.vue：

2.在组件的同级目录下创建 index.js 文件：

import Toast from './Toast'
const obj = {}
obj.install = function(Vue){//默认传入 Vue
    //1. 创建组件构造器
    const toastContrustor = Vue.extend(Toast)
    
    //2. new 的方式，根据组件构造器，可以创建出来一个组件对象
    const toast = new toastContrustor()

    //3.将该组件对象手动挂载到某一个 div 上
    toast.$mount(document.createElement('div'))

    //4. toast.$el 对应的就是上面创建的 div
    document.body.appendChild(toast.$el)

    //5. 添加到原型
    Vue.prototype.$toast = toast
}

export default obj

3.在 main.js 文件中添加如下内容：

import toast from './components/common/toast'

Vue.use(toast)//安装插件，执行导入文件中的 install 函数

 4.使用

this.$toast.show(res,1000)