[JavaScript知识库]Vue 组件的高级封装模式

一、传统模式

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

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

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

1.创建 Toast.vue 文件

<template>
  <div class="toast" v-show="show">
      <div>{{message}}</div>
  </div>
</template>

<script>
export default {
name:"Toast",
props:{
    message:{
        type:String,
        default:''
    },
    show:{
        type:Boolean,
        default: false
    }
}
}
</script>

<style>
.toast{
    position: fixed;
    top:50%;
    left: 50%;
    transform: translate(-50%,-50%);
    padding: 8px 10px;
    border-radius: 10%;

    z-index: 99;

    color: white;
    background-color: rgba(0,0,0,.75);
}
</style>

2.导入组件

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

3.注册组件

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

4.使用组件

<toast :message="message" :show="show"  />

运行效果：

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

二、高级模式

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

this.$toast(message,1000)

具体步骤如下：

1.创建组件 Toast.vue：

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

<script>
export default {
name:"Toast",
data(){
    return{
        message:'',
        isShow:false
    }
},
methods:{
    show(message='默认文字', duration=2000){
      this.isShow = true;
      this.message = message;
      setTimeout(() => {
          this.isShow = false;
          this.message = ''
      },duration)

    }
}
}
</script>

<style>
.toast{
    position: fixed;
    top:50%;
    left: 50%;
    transform: translate(-50%,-50%);
    padding: 8px 10px;
    border-radius: 10%;

    z-index: 99;

    color: white;
    background-color: rgba(0,0,0,.75);
}
</style>

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)

开发者涨薪指南

48位大咖的思考法则、工作方式、逻辑体系