项目中使用了vue3+ts总结经验

总结经验

项目中需要用到vue3+ts，在使用中学习了解到一些用法和写法，总结下来。

常用写法

1. ts语句写在script中，添加setup属性，并添加lang属性赋值为ts

<script setup lang="ts">

</script>

2. 定义

//定义变量
const index = ref(1)
//修改变量的值
index.value = 2

//定义空数组
const arrList = ref<any[]>([])
//定义对象
const detailInfo = ref<any>({
	name:"张三",
	age:20,
})

//定义函数
function abc(){
}

3. 生命周期函数、监听写法

//onMounted
onMounted(()=>{
	//获取列表数据
	getDetail()
)

//监听watch
watch(()=>监听内容, ()=>{
	监听变化后执行的操作
}, { immediate: true })

4. 父子组件传值用法

//父组件向子组件传值

//在子组件中
const props = defineProps({
	arrList:{
		type:Array,
		default:()=>[]
	}
})
//子组件使用时
props.arrList


//子组件向父组件传值
//在子组件中
const emit = defineEmits(['handleList'])
function handleList(){
	emit('handleList')
}
//在父组件中
function handleList(){
}
@handle-list = "handleList"

5. 为空用法表示

//在回显中，若字段为null或undefined取值不报错，整个表达式的值为undefined
<span> {{item?.title}} </span>

6. 修改路由

import { useRouter } from 'vue-router';
const router = userRouter()

//携带参数跳转路由
function handleDetail(item){
	router.push({
		path:'/detail',
		query:{
			id:item.id
		}
	})
}

7. 动态获取图片地址

//将图片导入页面中
import img from '../../assets/img/a.jpg'
const getURL = url=> new URL(url,import,meta.url).href

<img :src="getURL(img)">

后续还会继续补充，欢迎大家借鉴和指正