使用class的方式创建Vue的组件，解决代码复用的问题

import { ref } from 'vue'
import { store } from '@naturefw/nf-state'
export default class BaseComp {
  constructor () {
    this.name = 'baseName'
    this.inheritAttrs = false
    this.components = {} // 可以在这里注册共用组件
    this.props = { // 可以在这里设置共用属性
      baseProps: {
        type: String,
        default: '基类定义的 props'
      }
    }
    this.store = store // 设置状态，这样就不用每次都 import 了。
  }
  _setup (props, ctx) {
     // 可以设置共用成员
    const baseRef = ref('基类setup定义的')
    // 可以设置生命周期的钩子
    // 其他共用代码
    return {
      store, // 返回状态
      baseRef // 返回成员
    }
  }
}
复制代码

import { ref, defineComponent } from 'vue'
import BaseComp from './baseComp.js'
/**
 * 返回组件需要的属性
 * @param {*} info 
 * * name = 'baseName'
 * * inheritAttrs = false
 * * components = {}
 * * props = {}
 * * setup = () => {}
 */
const myComp = (info) => {
  // 获取基类的实例
  const comp = new BaseComp({})
  // 设置组件的 name
  if (info.name) {
    comp.name = info.name
  } else {
    comp.name += new Date().valueOf()
  }
  // 附加组件内使用的组件，可以按照不同的小分类设置
  if (info.components) {
    Object.assign(comp.components, info.components)
  }
  // 合并属性
  if (info.props) {
    Object.assign(comp.props, info.props)
  }
  // 获取父类的 setup
  const _setup = comp._setup
  // 设置 setup
  comp.setup = (props, ctx) => {
    // 执行父类的 setup
    const _re = _setup(props, ctx)
    // 可以制定子类的共用成员
    const childRef = ref('子类setup定义的')
    const _this = {
      props,
      ctx,
      store: _re.store
    }
    // 执行 组件定义的 setup，可以使用 this，也可以设置参数。
    const _re2 = (info.setup) ? info.setup.call(_this): {}
    const _re3 = _re2 ?? {}
    // 返回给 template 
    return {
      childRef,
      ..._re,
      ..._re3
    }
  }
  // 返回组件需要的各种属性
  return defineComponent(comp)
}
复制代码

import childComp from './childComp.js'
export default childComp({
  setup: (props, ctx, store) => {
    // 可以有 this，也可以使用参数，看个人喜欢。
    this.store.user.name = '修改一下用户名称'
    return {}
  }
})
复制代码