设计模式(3): 二次封装与高阶组件

概述

最近最近做项目的时候总会思考一些大的应用设计模式相关的问题，我把自己的思考记录下来，供以后开发时参考，相信对其他人也有用。

二次封装组件

PM的需求无奇不有，所以很多时候，我们使用的组件满足不了PM的需求，怎么办呢？比如，组件需要传入一个数组，但是我们必须传2个变量；或者我们需要在组件focus的时候调用一个方法，但是组件并没有暴露focus事件等等。虽然都是些很简单的需求，但是组件就是没有暴露实现这些需求的方法。咋办？

方法是对组件进行二次封装。

二次封装主要运用了vue的如下属性：

vm.$attrs: 包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件。
vm.$props: 当前组件接收到的 props 对象。
vm.$listeners: 包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件。

$props可以拿到传给当前组件的所有props，$attrs可以拿到传给组件的所有非props的属性，$listeners可以拿到所有传给组件的事件监听器。

例子

举个例子，比如说el-upload需要传一个数组，但是我们只能传2个变量；并且，我们需要在el-upload上传success的时候做点其它的事。封装的代码如下：

export default {
  name: 'YmUpload',
  props: {
    name: {
      type: String,
      default: '',
    },
    url: {
      type: String,
      default: '',
    },
    onSuccess: {
      type: Function,
      default: () => 1,
    },
  },
  data() {
    return {
      fileList: [],
    };
  },
  watch: {
    url() {
      this.init();
    },
  },
  computed: {
    uploadAttr() {
      return {
        ...this.$attrs,
        fileList: this.fileList,
        onSuccess: this.handleSuccess,
      };
    },
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      // 组件初始化
      const payload = {
        name: this.name || this.url,
        url: this.url,
      };
      this.fileList = [payload];
    },
    handleSuccess(res, file, fileList) {
      // 做点其它的事
    },
  },
};

设计模式(3): 二次封装与高阶组件

概述

二次封装组件

例子

推荐阅读