TypeScrip在vue中的使用-----defineProps
小知识点:在vscode中定义好子组件的vue视图后。我们可以直接使用<子组件/>来使用子组件,因为我们使用了import插件,他会自动import
所需文件。
使用一:父向子传值,我们之前父向子传值的时候,子组件是如下:
defineProps({
house: {
type: String,
required: true,
},
});
使用了TS增加泛型,看上去代码也更加简洁(注:当我们使用vscode时,输入defineProps 会有一些提示)
defineProps<{ house:string }>()
当然上述写法还可以变成如下:
type propType = { house:string } defineProps<propType>() </script>
我们也可以在属性后面加“?”,来表示这是可选属性,那么这是可传可不传的。
type propType = { house?:string } defineProps<propType>()
可以在接收参数解构的时候设置默认值。如果父组件并没有传值过来,那么就使用默认值
type propType = { house?: string; }; //设置默认值,解构的时候设置,表示父组件没有传过来就用这个默认值 const { house = "茅草屋" } = defineProps<propType>();
分类:
前端学习 / TypeSript
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 单元测试从入门到精通
· 上周热点回顾(3.3-3.9)
· winform 绘制太阳,地球,月球 运作规律