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

Vue3 TypeScript 相关代码写法合集

2024-06-16 09:06:50 前端知识 前端哥 835 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基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

情人节程序员用HTML网页表白【爱的计时】 HTML5七夕情人节表白网页源码 HTML CSS JavaScript

2024-06-22 01:06:05

html5 标签的分类及样式的分类和优先级

2024-06-22 01:06:04

前端开发 4: jQuery

2024-06-22 01:06:02

基于javaweb mysql的ssm固定资产管理系统(java ssm jsp jquery bootstrap mysql)

2024-06-22 01:06:36

基于html5的国家历史文物网站的设计与实现-计算机毕业设计源码63653

2024-02-03 12:02:00

无涯教程-jQuery - Button组件函数

2024-06-22 01:06:21

计算机毕业设计 基于html5的图书管理系统的设计与实现 Java实战项目 附源码 文档 视频讲解

2024-06-22 01:06:18

网页开发 HTML

2024-06-22 01:06:17

HTML:七天学会写基础网页11

2024-06-22 01:06:13

Web前端资深架构师分享学习经验及总结，jQuery入门到精通（四，2024最新前端笔经

2024-06-22 01:06:10

大家推荐的文章
1

在HTML和CSS当中运用显示隐藏

2024-06-17 09:06:541000
2

成为优秀的TS体操高手 之 TS 类型体操前置知识储备

2024-06-10 11:06:351000
3

django改了html网页没有变化,,前端页面居然没有对应变化?!修改了css文件但是前端页面没有反应

2024-06-06 10:06:201000
4

html简单网页代码：基于html关爱空巢老人网页设计与实现

2024-06-04 10:06:181000
5

jquery实现注册表单验证（仅供参考）

2024-06-07 00:06:411000
6

基于Echarts的高校就业数据可视化管理系统设计与实现（计算机毕业设计源码81461）

2024-05-29 10:05:301000
7

VUE3 Vite Pinia TypeScript项目笔记

2024-05-20 14:05:191000
8

轻松掌握数据库中JSON数据提取：json_extract函数用法详解

2024-05-09 11:05:011000
9

HTML5(六)——Canvas 高级操作

2024-05-09 10:05:191000
10

UE4.27支持HTML5

2024-05-07 13:05:261000

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

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

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

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

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