求助,vue单文件组件如何拆分?

vue单文件组件如何拆分?

普通单文件组件:log.vue

js 复制代码
<script setup lang="ts">
import { ref } from 'vue';
​
const index = ref<number>(1)
</script>
​
<template>
    <h1>{{ index }}</h1>
</template>
​
<style scoped>
h1 {
    color: red;
    font-size: 50px;
}
</style>

目前情况

组长设计目的:

1.为了抽离逻辑内容,避免一个文件代码太多

2.逻辑代码使用class,可以抽离通用逻辑和工具到common,其他文件可以继承使用

拆分成两个文件:

log.hook.ts

ts 复制代码
import { Ref, ref } from "vue";
export default class log {
    index: Ref<number>
  
    constructor() {
        this.index = ref(1)
    }
​
}

log.vue

ts 复制代码
<script setup lang="ts">
import logHook from "./log.hook";
​
const hook = new logHook()
</script>
​
<template>
    <h1>{{ hook.index }}</h1>
</template>
​
<style scoped>
h1 {
    color: red;
    font-size: 50px;
}
</style>

缺点:

1.this.的问题.在log.hook.ts内部,写逻辑,都要this.XXX.this.AAA,很繁琐

2.在log.vue中调用log.hook.ts方法时,有时候会报this的错误

需求,有什么更好的拆分方法吗?

1.为了抽离逻辑内容,避免一个文件代码太多

2.逻辑代码使用class,可以抽离通用逻辑和工具到common,其他文件可以继承使用

相关推荐
cypking3 分钟前
解决 axios get请求瞎转义问题
vue.js
向阳25612 分钟前
SpringBoot+vue前后端分离整合sa-token(无cookie登录态 & 详细的登录流程)
java·vue.js·spring boot·后端·sa-token·springboot·登录流程
hepherd15 分钟前
Flask学习笔记 - 模板渲染
前端·flask
LaoZhangAI16 分钟前
【2025最新】Manus邀请码免费获取完全指南:5种稳定渠道+3个隐藏方法
前端
经常见17 分钟前
浅拷贝与深拷贝
前端
艾克马斯奎普特18 分钟前
Vue.js 3 渐进式实现之响应式系统——第一节:系列开篇与响应式基本实现
vue.js
梅子酱~21 分钟前
Vue 学习随笔系列二十二 —— 表格高度自适应
javascript·vue.js·学习
前端飞天猪22 分钟前
学习笔记:三行命令,免费申请https加密证书📃
前端
关二哥拉二胡23 分钟前
前端的 AI 应用开发系列二:手把手揭秘 RAG
前端·面试
斯~内克25 分钟前
前端图片加载性能优化全攻略:并发限制、预加载、懒加载与错误恢复策略
前端·性能优化