Vue3实现组件级基类的几种方法

这篇具有很好参考价值的文章主要介绍了Vue3实现组件级基类的几种方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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,那么,我也没想出来办法。(只能第二种方式)文章来源地址https://www.toymoban.com/news/detail-427777.html

到了这里,关于Vue3实现组件级基类的几种方法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue中组件传参的几种方法

    Props:通过在父组件中定义props属性,将数据传递给子组件。子组件通过props属性接收数据。例如: $emit:通过在子组件中触发事件,将数据传递给父组件。父组件通过在子组件上监听事件,接收数据。例如: Provide/Inject:通过在父组件中提供数据,让子孙组件可以注入数据。

    2024年02月12日
    浏览(46)
  • vue父子组件之间的传参的几种方式

    这是最常用的一种方式。通过props选项,在父组件中传递数据给子组件。在子组件中使用props声明该属性,就可以访问到父组件传递过来的数据了。 子组件向父组件传递数据的方式。在子组件中使用emit方法触发一个自定义事件,并通过参数传递数据。在父组件中监听这个事件

    2023年04月24日
    浏览(66)
  • Java中String类的几种常见遍历方式

    今天小小的给自己总结一下String类的几种常见遍历方式,如下。 charAt(): charAt(int index) :返回 char指定索引处的值。 toCharArray() : toCharArray() :将此字符串转换为新的字符数组。 然后按照遍历字符串数组的方式遍历即可,可采用普通for循环遍历,也可以采用增强for循环遍历。 sub

    2024年02月16日
    浏览(41)
  • [Lua] 实现所有类的基类Object、模拟单继承OO、实现抽象工厂

    Lua 没有严格的 oo(Object-Oriented)定义,可以利用元表特性来实现 先定义所有类的基类,即 Object 类。代码顺序从上到下,自成一体。完整代码 定义一个空表 Object , __index 指向其自身(继承将直接使用该表作为对象的元表) new 定义构造对象时的初始化行为,相当于 构造器

    2024年02月11日
    浏览(36)
  • vue深拷贝的几种实现方式

    1、通过递归方式实现深拷贝 比较全面的深拷贝,缺点是较为繁琐 2、JSON.parse(JSON.stringify(obj)) 满足一般使用场景,但无法实现对象中方法(function)的深拷贝 3、jQuery的extend方法实现深拷贝 4、Object.assign(obj1, obj2) 只有一级属性为深拷贝,二级属性后就是浅拷贝 5、扩展运算符 只有

    2024年02月09日
    浏览(47)
  • Vue3的几款UI组件库:Naive UI、Element Plus、 Ant Design Vue、Arco Design

    vue3系列的三款ui框架简要对比: 框架 Element Plus Naive ui Ant Design Vue Arco Design 简介 element-ui Vue3版本,国内使用广泛 Vue作者推荐的Vue3ui 组件库 Ant Design 的 Vue 实现,组件的风格与 Ant Design 保持同步 ArcoDesign 主要服务于字节跳动旗下中后台产品的体验设计和技术实现 社区活跃度

    2024年02月03日
    浏览(44)
  • 子组件向父组件传参的几种方法

    在用vue框架写项目的时候,多多少少会遇到子组件向父组件传参的方法。作为一个新手,确实让人头疼,于是便有了这篇小白写的总结,话不多说,开始! 以下方法全部基于这两个父子组件结构实现: 父组件 子组件 思路:在父组件中定义一个函数,通过props传递给子组件,

    2024年02月05日
    浏览(45)
  • WIn11关闭小组件窗口的几种方法

    最近经常无缘无故弹出小组件窗口,显得格外烦人,这货对于我来说完全没啥用,还占用部分系统资源,对于喜欢使用的童鞋,可以配置日历、天气、新闻之类的小组件。 下面是几种关闭小组件的方法。 按下组合键 win + I 进入系统设置 选择 个性化 - 任务栏 直接将任务栏功

    2024年02月12日
    浏览(63)
  • Vue3 实现模态框组件

    下面是一个基于 Vue 3 实现的模态框,并且点击遮罩层可关闭模态框的示例代码: 在这个示例中,定义了一个名为 Modal 的组件,并且通过 props 属性接收了一个 title 属性,表示模态框的标题。在 setup 函数中,使用 ref 函数创建了一个名为 visible 的响应式数据,表示模态框是否

    2024年02月05日
    浏览(33)
  • Java进阶(1)——JVM的内存分配 & 反射Class类的类对象 & 创建对象的几种方式 & 类加载(何时进入内存JVM)& 注解 & 反射+注解的案例

    1.java运行时的内存分配,创建对象时内存分配; 2.类加载的顺序,创建一个唯一的类的类对象; 3.创建对象的方式,new,Class.forName,clone; 4.什么时候加载.class文件进入JVM内存中,看到new,Class.forName; 5.如何加载?双亲委托(委派)机制:安全;AppClassLoader; 6.反射实质:能

    2024年02月14日
    浏览(41)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包