vue开发抽取组件方式思路

例如如果跳转参数统一的话可以抽取一个方法挂载到vue；

/**
 * 审批列表跳转
 * @param {String} name 跳转路由
 * @param {Object} row 所选数据项
 * @param {Object} query 其他需要跳转的参数
 */
Vue.prototype.$goApproval = function (name, row, query) {
  this.$router.push({
    name,
    query:{
      dataId: row.id,
      dataStatus: row.auditStatus,
      currentAuditNum: row.currentAuditNum,
      auditNode: row.workflowAuditNode,
      instId: row.workflowInstId,
      workflowTaskId: row.workflowTaskId,
      type: "add",
      ...query
    },
  })
};

这样就可以在页面统一使用 this.$goApproval() 进行跳转  后面方便统一修改

一般通用的弹窗类型组件可以抽取成一个组件挂载到vue；Vue.extend => Vue 构造器

Vue 基础知识之 Vue.extend - 绅士喵呜 - 博客园

将普通的Vue组件封装成以方法形式调用的组件；

/ *
 * @param {VueComponent} Component - Vue组件
 * @param {Object} defaultProps - 默认props
 * @returns {Function}
 */
export function useFunctionComponent(Component, defaultProps) {
  return function (props = {
  }) {
    let _Component = Vue.extend(Component);
    return new Promise((resolve, reject) => {
      let vm = new _Component({
        data: {
          props: {
            ...defaultProps,
            ...props,
          },
          resolve,
          reject,
        }
      });
      vm.$mount();
      vm.visible = true;
    });
  }
}
/**
 * 以方法调用组件时，需要混入的属性
 * 一般都是弹窗类型的组件
 * @see {@link useFunctionComponent}
 * @returns {Object} 混入属性
 */
export function functionComponentMixins() {
  return {
    data() {
      return {
        visible: false,
        props: {},
        resolve: () => { },
        reject: () => { }
      }
    },
    watch: {
      visible(val) {
        if (val === false) {
          this.$destroy();
        }
      },
    }
  }
}

//使用
import Component from './index.vue';
import { useFunctionComponent } from '../../utils/useFunctionComponent';

export default useFunctionComponent(Component, Component.data().props)


//index.vue
this.resolve(true);

vue组件优化:

组件传默认值  defaultkeys  暴露formatter来使用