Vue3的组件有三种代码组织方式

  1. 纯Option API (不含setup)
  2. option API + setup
  3. 纯 setup (即composition API)

对于这三种形式,设置基类的方法也略有不同。

使用 mixins、extends

vue3提供了 mixins和extends,但是尝试之后发现这两种方法只支持纯OptionAPI,设置的data会被识别,但是设置的setup里return 的 reactive,完全无效,setup也没有被执行。

所以这种方式只能使用于第一种方式。

使用 hooks (function、class)

既然官方没有提供,那么我们自己来想想办法。我们先观察一下组件的代码(第二种情况):

<template>
<!--模板-->
举例
</template> <script lang="ts">
import { defineComponent } from 'vue' export default defineComponent({
name: 'ui-core-',
components: {
// 注册共用组件
},
props: {
// 定义共用属性
},
setup(props, context) {
// 各种共用操作
_logger()
_setTitle()
// 共用成员
const foo = reactive ({})
return {
foo
}
}
})
</script>

defineComponent 方法接收一个对象,对象需要有特定的几个属性,比如name、components、props、setup等。

那么也就是说,我们可以做一个函数返回这样的对象即可。

比如我们先建立一个js(或则ts)文件:

export function base (name, callback) {
return {
name: 'ui-' + name,
components: {
// 注册共用组件
},
props: {
// 定义共用属性
},
setup(props, context) {
// 各种共用操作
_logger()
_setTitle()
// 共用成员
const foo = reactive ({}) // 执行其他操作
const re = callback(props, context)
return {
foo,
...re
}
}
}
}

有点像模板模式。

传入name和一个回调函数,props, context作为参数进行传递。内部成员也可以作为参数传递。

这样一个简单的基类就做成了,如果你觉得function不好看,那么可以换成class。

export default class BaseComponent {
name: string
components: any
props: any
setup: any constructor (name: string, callback: (props: any, context: any) => any) {
this.name = name
this.components = {}
this.props = {}
this.setup = (props: any, context: any) => {
// 各种共用操作
_logger()
_setTitle() // 执行其他操作
const re = callback(props, context) return {
...re
}
} }
}

有了class之后,还可以设置子类,不过感觉有点繁琐。总之,反正可以实现就对了。

script setup怎么办

上述这种方法应该也是可以支持纯composition API的,但是有点小问题,defineProps 和 defineEmits 并不是普通 js 函数,而是一种“宏”。

引用官网的解释:

defineProps 和 defineEmits 都是只能在 <script setup> 中使用的编译器宏。他们不需要导入,且会随着 <script setup> 的处理过程一同被编译掉。

也就是说 defineXXX系列 只有在 <script setup> 标签内部才会被识别,如果在单独的js文件里面,不会被识别。

这就导致 defineProps 和 defineEmits 无法做成基类的形式。

如果需要的基类不涉及 defineProps 和 defineEmits 的话,那么还是可以在单独的js文件里面定义一个function或者class的,(即做一个综合的hooks)。

如果涉及 defineProps 和 defineEmits,那么,我也没想出来办法。(只能第二种方式)

Vue3实现组件级基类的几种方法的更多相关文章

  1. [UE4]创建Shooter基类,2种方法

    一.可以通过直接修改"BP_FPPCharacter"的名字为“BP_Shooter”作为基类,然后新建一个"BP_FPPCharacter"继承自“BP_Sh ...

  2. WPF组件开发之组件的基类

    之前在网上看到很多关于组件开发的资料,但真正可以用到框架内的却很少.今天贴出自己做的组件,并适合大部分框架的代码. 组件开发需要先做出组件的基类,然后由其他的各类组件去继承这个基类,下面是组件基类的代 ...

  3. 浅析Object基类提供的Equals方法

    当我们去查看object.cs源代码文件的时候,会发现object基类提供了三种判断相等性的方法.弄清楚每种方法存在的原因,也就是具体解决了什么问题,对我们理解.net判断对象相等性的逻辑很有帮助,下 ...

  4. Atitti 载入类的几种方法    Class.forName ClassLoader.loadClass  直接new

    Atitti 载入类的几种方法    Class.forName ClassLoader.loadClass  直接new 1.1. 载入类的几种方法    Class.forName ClassLo ...

  5. [转]Javascript定义类的三种方法

    作者: 阮一峰 原文地址:http://www.ruanyifeng.com/blog/2012/07/three_ways_to_define_a_javascript_class.html 将近2 ...

  6. 关于fmri数据分析的两大类,四种方法

    关于fmri数据分析的两大类,四种方法: 数据驱动: tca:其实这种方法,主要是提取时间维的特征.如果用它来进行数据的分析,则必须要利用其他的数据方法,比如结合ICA. ica:作为pca的一般化实 ...

  7. [转] 用javascript修改css伪类的几种方法

    用javascript修改css伪类的几种方法: Modify pseudo element styles with JavaScript http://pankajparashar.com/post ...

  8. 【Unity3D基础教程】给初学者看的Unity教程(二):所有脚本组件的基类 -- MonoBehaviour的前世今生

    作者:王选易,出处:http://www.cnblogs.com/neverdie/ 欢迎转载,也请保留这段声明.如果你喜欢这篇文章,请点[推荐].谢谢! 引子 上一次我们讲了GameObject,C ...

  9. C#派生类中使用基类protected成员的方法

    我们知道C#中通过继承可以使一个具有公共数据和方法的基类被广泛应用从而减少代码量,这样派生类会具有基类中所有成员(除构造器等),我们理所当然可以通过派生类实例来使用基类的成员.那么当基类成员被prot ...

  10. moviepy音视频剪辑基类VideoClip的write_gif方法opt、fuzz、dispose、colors、loop等参数的作用

    ☞ ░ 前往老猿Python博文目录 ░ moviepy音视频剪辑模块的视频剪辑基类write_gif方法用于将视频剪辑输出到gif文件,调用语法如下: def write_gif(self, fil ...

随机推荐

  1. 九九乘法表打印记一次al面试

    for (int i = 1; i <= 9; i++) { for (int j = 1; j <= i; j++) { System.out.print(i + "x&quo ...

  2. LVS简略介绍

    一.lvs是什么 LVS是 Linux Virtual Server 的简称,也就是Linux虚拟服务器.这是一个由章文嵩博士发起的一个开源项目,它的官方网站是 http://www.linuxvir ...

  3. git合入代码过程中问题记录

    问题一. 对远端仓库没有操作权限 ERROR: Repository not found. fatal: Could not read from remote repository. 定位思路 1.检 ...

  4. redis windows版本安装

    1.redis3.0-win版本微软已停止更新 链接:https://github.com/microsoftarchive/redis 非官方在持续更新 链接:https://github.com/ ...

  5. NFS存储安装配置

    一.NFS(Network File System)即网络文件系统,是FreeBSD支持的文件系统中的一种, 它允许网络中的计算机之间通过TCP/IP网络共享资源.在NFS的应用中,本地NFS的客 户 ...

  6. switch case return return 返回不了值的原因

    我在页面写了一个ajax ,但是控制器 是 用switch case break 控制的控制器  , 我想 在case login 方法里  直接 return  , 但是不好使 始终是 null , ...

  7. IBM MQ 配置SSL 连接

    图示为思路: 下面介绍具体的步骤 参考文档: https://www.jianshu.com/p/2865965a42d9 http://www.hackdig.com/?01/hack-7976.h ...

  8. table control的最小高度

    标准的表维护和不通过向导建的table control最小显示行是2. 通过向导建立的table control最小显示行是4. 前台没有任何能看出来的配置差异. 有个隐藏的最小显示行,只有把屏幕下来 ...

  9. gorm操作sqlite3,高并发读写如何避免锁库?

    1. 场景 这两天一直被这个sqlit3困扰,起因是项目中需要有这样一个中间,中间件承担着API角色和流量转发的角色,需要接收来自至少300个agent的请求数据,和健康检测的请求. 所以当即想到用g ...

  10. nginx+lua+openresty+kafka相关问题汇总

    这里使用的是kafka插件是doujiang大佬的https://github.com/doujiang24/lua-resty-kafka,版本为v0.2.0. 应用场景 在nginx转发中,记录非 ...