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

设计模式(3): 二次封装与高阶组件
强烈推介IDEA2021.1.3破解激活,IntelliJ IDEA 注册码,2021.1.3IDEA 激活码  

大家好,我是架构君,一个会写代码吟诗的架构师。今天说一说设计模式(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) {
      // 做点其它的事
    },
  },
};

转载于:https://www.cnblogs.com/yangzhou33/p/11343114.html

本文来源weixin_30595035,由架构君转载发布,观点不代表Java架构师必看的立场,转载请标明来源出处:https://javajgs.com/archives/29484

发表评论