Vue 组件的高级封装模式

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

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)