菜单 搜索
首页 前端知识 Vue3 TypeScript 相关代码写法合集

Vue3 TypeScript 相关代码写法合集

2024-06-16 09:06:50 前端知识 前端哥 842 491 我要收藏

一、css样式

1、深层查找写法

:deep(.class){
  color:red;
}

二、ts部分

1、export default 和 export 的区别和用法

export default和export都能导出一个模块里面的常量，函数，文件，模块等，在其它文件或模块中通过import来导入常量，函数，文件或模块。这样就可以使用它们了。但是，在一个文件或模块中，export,import可以有多个，export default却只能有一个。

通过export方式导出，在导入的时候需要加{}大括号，export default 就不需要

2、在hooks中，函数以及各种操作需要在里层做处理，外层调用时只用作展示。

将需要展示的各种变量以及函数返回出去的方法：

方法一：异步返回（通过Promise,resolve将变量数据返回，获取也通过异步获取）

import { TResponse, TTotal } from "@/module/common"
import { TRecordMenuType } from '@/module/record';
import { getRecordMenu } from "@/api/record";
import { ref } from "vue";

const recordMenu = ref<TRecordMenuType[]>()
const gradeList = ref<TRecordMenuType[]>()

// 获取章节接口
async function GetRecordMenu(Id: any,  rank: number): Promise<TRecordMenuType[]> {
    return new Promise(async (resolve, reject) => {
        let res: TResponse<TRecordMenuType[]> = await getRecordMenu({ ParentId: Id, ChildrenCount: rank })
        let { Code, Data } = res
        if (Code === 200) {
            if (rank === 1) {
                recordMenu.value = Data
                resolve(recordMenu.value)
            } else if (rank === 2) {
                gradeList.value = Data
                resolve(gradeList.value)
            }
        }
    })
}
// 单个方法导出

import { getRecordMenu } from "@/api/record";
import { ref } from "vue";

const recordMenu = ref()
const gradeList = ref()

// 获取章节接口
export const GetRecordMenu=(Id, rank)=>{
    return new Promise(async (resolve, reject) => {
        let { Code, Data } = await getRecordMenu({ ParentId: Id, ChildrenCount: rank })
        if (Code === 200) {
            if (rank === 1) {
                recordMenu.value = Data
                resolve(recordMenu.value)
            } else if (rank === 2) {
                gradeList.value = Data
                resolve(gradeList.value)
            }
        }
    })
}

页面获取

<script lang="ts" setup>
import { GetRecordMenu } from './hooks/record_menu' // 混入

const load = async ()=>{
    if (person.parId) {
        person.menuList = await GetRecordMenu(person.parId, 2)
    }
}

</script>

方法二：同步返回（将需要返回的变量及函数返回，export 导出多个加 {} ，获取也是多个加{} 导入）

import { TResponse, TTotal } from "@/module/common"
import { TRecordListType } from '@/module/record';
import { getRecordList } from "@/api/record";
import { ref } from "vue";
import { ElLoading } from 'element-plus'

const datalist = ref<TRecordListType[]>()
const recordMenu = ref<TRecordMenuType[]>()
const gradeList = ref<TRecordMenuType[]>()
const isShow=ref(false)

// 获取录播列表
const GetRecordList = async (Id: number) => {
    isShow.value = false
    const loading = ElLoading.service({
        lock: true,
        text: 'Loading',
        background: 'rgba(0, 0, 0, 0)'
    })
    try {
        let res: TResponse<TTotal<TRecordListType[]>> = await getRecordList({ Id: Id, PageIndex: 1, PageSize: 100 })
        let { Code, Data } = res
        if (Code === 200) {
            datalist.value = Data.Data
            if (datalist.value.length===0){
                isShow.value = true
            }
        }
    } catch (error) {

    }finally{
        loading.close()
    }
}

export { datalist, recordMenu , gradeList, isShow }

页面获取

<script lang="ts" setup>
import { GetRecordMenu, GetRecordList, datalist, recordMenu , gradeList, isShow } from './hooks/record_menu' // 混入菜单栏

const load = ()=>{
    GetRecordList(currId)
}

</script>

方法三：全部返回（定义外层函数名，包裹所有变量以及函数，通过return返回全部名称，再通过export default 导出外层函数名）

import { TResponse, TTotal } from "@/module/common"
import { TRecordListType, TRecordMenuType } from '@/module/record';
import { getRecordList, getRecordMenu } from "@/api/record";
import { ref } from "vue";
import { ElLoading } from 'element-plus'
function dataInit() {
    const datalist = ref<TRecordListType[]>()
    const recordMenu = ref<TRecordMenuType[]>()
    const gradeList = ref<TRecordMenuType[]>()
    const isShow=ref(false)

    // 获取章节接口
    async function GetRecordMenu(Id: any,  rank: number): Promise<TRecordMenuType[]> {
        return new Promise(async (resolve, reject) => {
            let res: TResponse<TRecordMenuType[]> = await getRecordMenu({ ParentId: Id, ChildrenCount: rank })
            let { Code, Data } = res
            if (Code === 200) {
                if (rank === 1) {
                    recordMenu.value = Data
                    resolve(recordMenu.value)
                } else if (rank === 2) {
                    gradeList.value = Data
                    resolve(gradeList.value)
                }
            }
        })
    }
    // 获取录播列表
    const GetRecordList = async (Id: number) => {
        isShow.value = false
        const loading = ElLoading.service({
            lock: true,
            text: 'Loading',
            background: 'rgba(0, 0, 0, 0)'
        })
        try {
            let res: TResponse<TTotal<TRecordListType[]>> = await getRecordList({ Id: Id, PageIndex: 1, PageSize: 100 })
            let { Code, Data } = res
            if (Code === 200) {
                datalist.value = Data.Data
                if (datalist.value.length===0){
                   isShow.value = true
                }
            }
        } catch (error) {

        }finally{
            loading.close()
        }
    }
    return {
        datalist,
        recordMenu,
        gradeList ,
        isShow,
        GetRecordList,
        GetRecordMenu
    }
}
export default dataInit

页面获取

<script lang="ts" setup>
import dataInit from './hooks/record_menu' // 混入菜单栏
const { datalist, isShow, GetRecordList, GetRecordMenu } = dataInit()

const load = async ()=>{
    person.menuList = await GetRecordMenu(person.parId, 2)
}

</script>

3、try catch finally的用法

1、将预见可能引发异常的代码包含在try语句块中。

2、如果发生了异常，则转入catch的执行。

try { // 正常处理
    
} catch (error) { //报错处理

}finally{ //无论对错都执行
    
}

4、给组件传参，ts接收方法

传递字符串、数字等低层级时，需要 withDefaults 拆解

type TProps = {
    aaa: number,
    bbb: string
}

// withDefaults 拆解
let prop = withDefaults(defineProps<TProps>(), {})

// 获取参数
console.log(prop.aaa);

传递数组、数组对象等多层级时，不需要 withDefaults 拆解

// 定义里层类型
type TleftData={
    AliasName: string,
    Children: Array<TleftData>
    CoverUrl: string
    Id: string
    Name: string
}

type TProps = {
    leftData: Array<TleftData>
}

// 直接接收，不需要拆解
let prop = defineProps<TProps>()

// 需要转出
let prs = toRefs(prop)

// 获取整个数据对象
console.log(prs.leftData.value);

如果是深层嵌套的数据，子组件中容易渲染不出，值为空的情况下，需要将里层数据解构出来

let {materialInfo,Type}=prs

5、子组件定义方法，父页面去使用的方法

子组件定义

// 定义多个
const emit = defineEmits(['gradeMenu', 'subjectMenu', 'rightMenu', 'okMenu'])

// 右侧切换
let rightChange = (item: any) => {
    emit('gradeMenu', item)
}

父页面使用

<Screen @gradeMenu="gradeMenu" :leftData="person.menuList"></Screen>

<script lang="ts" setup>
import Screen from "@/components/Screen/index.vue";
const gradeMenu = (item:any) => {
   // 处理相关的逻辑
}
</script>

6、父组件直接调用子组件方法

子组件定义

// 定义的子组件方法
const clearClick=()=>{
    myCharts.value.clear()
}

// 导出该方法
defineExpose({
    clearClick
})

父组件使用

<Screen ref="myChild"></Screen>

<script lang="ts" setup>
import Screen from "@/components/Screen/index.vue";
import { ref,nextTick } from 'vue'

const myChild=ref()

//调用该方法
nextTick(()=>{
  myChild.value.clearClick()
})
</script>

7、使用ref获取dom元素；调用当前元素的方法

<aliplayer v-if="person.isPlayer" class="aliplayer_box" ref="player"
                 :autoplay="true" :isLive="person.isLive" :rePlay="false"
                showBuffer="false" showBarTime="5000" format="m3u8" :source="person.materialInfo.PlayAddress">
</aliplayer>

<script lang="ts" setup>
import { ref,getCurrentInstance } from 'vue'
// 获取当前dom元素
const players=ref(player)

// 调用当前元素的方法
const { ctx } = getCurrentInstance() as any
const loadByUrl=()=>{
     ctx.$refs.player.dispose()
     ctx.$refs.player.ready()
     ctx.$refs.player.loadByUrl(person.PlayAddress)
}

</script>

8、封装公共方法

在 utils 文件夹下，新建 tools.js 文件

// 命名外层对象
const tools = {
    // 创建方法—— 首字母转大写或小写
    firstLetterToLowercase(obj, type) {
        return Object.keys(obj).reduce((acc, key) => {
            let capitalizedKey;
            switch (type) {
                case 1:
                    capitalizedKey = key.charAt(0).toUpperCase() + key.slice(1);
                    acc[capitalizedKey] = obj[key];
                    return acc;
                case 2:
                    capitalizedKey = key.charAt(0).toLocaleLowerCase() + key.slice(1);
                    acc[capitalizedKey] = obj[key];
                    return acc;
            }

        }, {});
    }
}
// 返出去
export default tools

在 utils 文件夹下，新建 index.js 文件，对 tools.js 进行二次封装

import tools from './tools'
......

export {
  tools,
  ......
}

页面使用

import { tools } from '@/utils'

// a 为 'Hello'
let a = tools.firstLetterToLowercase('hello',1)

      希望我的愚见能够帮助你哦~，若有不足之处，还望指出，你们有更好的解决方法，欢迎大家在评论区下方留言支持，大家一起相互学习参考呀~

转载请注明出处或者链接地址：https://www.qianduange.cn//article/12403.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

运行npm error code ENOENTnpm error syscall opennpm error path C:\Users\ultra\Desktop\Vue-Project\pac

2024-08-27 09:08:17

前端提高篇（102）：jQuery高级方法callbacks、deferred

2024-05-09 11:05:34

解决npm install 报错 “npm err code 1“

2024-06-06 10:06:47

【常见错误】npm ERR! code CERT_HAS_EXPIRED & errno CERT_HAS_EXPIRED

2024-04-22 09:04:34

vue前端页面弹出红色报错遮罩层 Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack

2024-03-29 15:03:20

npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.

2024-04-20 17:04:38

JQuery中的load()、$

2024-05-10 08:05:15

《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML CSS JavaScript (1)

2024-10-30 21:10:12

基于Java SpringBoot Vue HTML5药店管理系统(源码 LW 调试文档 讲解等)/药店管理软件/药店进销存系统/药店库存管理系统/药店销售系统/药品管理系统/药店收银系统

2024-11-10 09:11:04

基于Java SpringBoot Vue HTML5宠物健康顾问系统(源码 LW 调试文档 讲解等)/宠物健康/顾问系统/宠物护理/宠物医疗/宠物保健/宠物咨询/宠物医生/宠物健康管理/宠物健康服务

2024-11-10 09:11:50

大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

CSS常用属性（文本属性）

2024-11-04 09:11:111000
3

TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000
4

CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000
5

vue使用datav echarts

2024-09-06 00:09:381000
6

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
7

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
8

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
9

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000
10

npm的使用

2024-08-18 00:08:131000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！