首页 > 其他分享 >Vue3实现组件级基类的几种方法

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

时间:2023-04-28 09:04:07浏览次数:45  
标签:Vue3 name setup props context 基类 组件 共用 any

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,name,setup,props,context,基类,组件,共用,any
From: https://www.cnblogs.com/jyk/p/17360859.html

相关文章

  • 私有继承派生类使用基类的成员函数
    按要求完成下面的程序:1、定义一个Animal类,成员包括:(1)整数类型的私有数据成员m_nWeightBase,表示Animal的体重;(2)整数类型的保护数据成员m_nAgeBase,表示Animal的年龄;(3)公有函数成员set_weight,用指定形参初始化数据成员m_nWeightBase;(4)公有成员函数get_weight,返回数据成员m_nWeightBase的......
  • Vue3路由正确写法
    import{createRouter,createWebHistory}from'vue-router'importHomefrom'@/view/Home.vue';importLoginfrom'@/view/Login.vue'constroutes=[{path:'/',component:Home},{path:'/login',......
  • 通过在classpath自动扫描方式把组件纳入spring容器中管理
    知识点:【前面的例子我们都是使用XML的bean定义来配置组件。在一个稍大的项目中,通常会有上百个组件,如果这些这组件采用xml的bean定义来配置,显然会增加配置文件的体积,查找及维护起来也不太方便。spring2.5为我们引入了组件自动扫描机制,他可以在类路径底......
  • vue2源码-十六、异步组件
    异步组件Vue中异步组件的写法有很多,主要用作大的组件异步加载的markdown组件editor组件。就是先渲染一个注释标签,等组件加载完毕,最后再重新渲染forceUpdate(图片懒加载)使用异步组件会配合webpack原理:异步组件默认不会调用Vue.extend()方法所有Ctor上没有cid属性,没有cid属......
  • vant ActionSheet组件嵌套多层时,第一层的顶部和底部不会被覆盖
    问题描述:这是一个只有在ios真机测试的时候才出现的问题,使用浏览器本地调试和安卓真机测试的时候都没有这个问题。在一个页面中点击一个按钮的时候会出现ActionSheet动作面板这个面板里主要是一个表单需要填写和确定、取消按钮。其中有选人组件这个组件也是用ActionSheet......
  • vue3 ts 项目文件夹解析
    vue3ts项目文件夹解析layouts文件夹通常用于存放应用程序中的布局组件或布局相关的文件。布局组件是用于包装应用程序中的页面内容的组件,通常包含头部导航、侧边栏、页脚、页面标题等等。布局组件可以在不同的页面中共享,并且可以为应用程序带来一致的外观和体验。core存放......
  • Oracle WebLogic多个组件漏洞风险提示
    漏洞概述近日,WebRAY安全服务产品线监测到Oracle官方发布了安全更新,本次共发布了包含WebLogic在内的433个产品的安全补丁程序,其中CVE-2023-21912、CVE-2023-21996、CVE-2023-21964、CVE-2023-21931、CVE-2023-21979等较为严重。WebLogic是美国Oracle公司出品的一个applicationserve......
  • vue2实现饼图Pie组件封装
    实现如下效果: 如果不会请移步到官网的栗子,请点击查看直接给大家上代码:整体代码片段1<template>2<divref="echarts"style="width:100%;height:300px;"></div>3</template>4<script>5/*eslint-disable*/6import{setPieOpt......
  • Vue 根据父组件的不同动态显示子组件
    一、问题描述两个同级组件公用一个子组件,需要根据不同的组件,动态显示子组件的内容,比如A需要这么多的Radio,但是B不需要二、解决思路父组件向子组件传值,子组件根据传入的内容进行判断三、代码//父组件引入子组件通过自定义名称传入父组件的值<statusChange:isShowRadio=......
  • WIN7下安装VUE3.0
    1、准备工作(你可以检查,清楚的话可以不用管)1.1、检查nodejs版本:node-v1.2、检车npm版本:npm-v1.3、查看VUE脚手架版本:vue--version或vue-V(大写的V)1.4、卸载VUE2版本命令:npmuninstallvue-cli-g1.5、卸载VUE3版本命令:npmuninstall-g@vue/cli2.下载node.js及配置tip......