Vue3 TypeScript 相关代码写法合集

一、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)复制

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