vue3+ts-setup语法糖(props)

已于 2023-06-30 15:10:32 修改
阅读量2.7k 收藏 7
点赞数
文章标签： vue.js javascript 前端
于 2023-06-30 15:07:54 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mo911108/article/details/131477142
版权

vue3+ts-setup语法糖(props)

vue3 新增了组合式api的语法糖，相应的props，也会有相应的变化。下面是我总结的三种。

<script setup lang="ts">
// 第一种： 使用这种方式可以设置props的 默认值 和 类型 和 是否可选
// const props = defineProps({
//   message: {
//     type: String,
//     required: true
//   },
//   selectCode: {
//     type: String,
//     default: '2001'
//   }
// })



// 第二种：ts 纯声明方式 这种方式不能设置默认值
// type Props = {
//   message: string
//   selectCode: string
// }
// const props = defineProps<Props>()



// 第三种： 那么可以使用 withDefaults
type Props = {
  message: string
  selectCode: string
}
const props = withDefaults(defineProps<Props>(), {
  message: 'button',
  selectCode: 'green'
})



// 注意 defineProps 与 withDefaults 都有一个返回值，
// 返回的是一个props对象，这个对象包含所有的props属性
console.log(props)
</script>
吱夏cz
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue组件jsx语法的具体使用
11-30
如果使用render函数来写比较复杂的vue组件，对于可读性和可维护性都很不友好，而使用jsx就会让我们回到更接近于模板的语法。babel转译器会将jsx转译为render函数渲染。 配置 需要用到babel插件 安装 npm install\ babel-plugin-syntax-jsx\ babel-plugin-transform-vue-jsx\ babel-helper-vue-jsx-merge-props\ babel-preset-env\ --save-dev .babelrc配置 在plugins中添加transform-vue-jsx { "pres
在vue3+ts+setup语法糖中使用图片预览组件
09-14
在vue3+ts+setup语法糖中使用图片预览组件，下载直接安装运行
【vue3】vue3 setup如何使用props？
热门推荐
qq_39576711的博客
03-18 5万+
setup是一个组件选项，在组件被创建之前，props 被解析之后执行。它是组合式 API 的入口。 他接受两个参数： {Data} props {SetupContext} context 在setup里边，第一个参数就是props，下面来看示例。 子组件propsTest.vue： <script lang="ts"> import { toRefs } from 'vue' interface Data { [key:string]:unknown } export defaul
vue3中setup的两个参数 props，context (attrs，emit，slots)，vue3中的双向数据绑定自定义事件emit和v-model
看见小狮子没
09-20 7012
这是父组件的name：{{obj.name}}
Vue3 + TS PropType类型验证，价值2000元的前端学习资源泄露
m0_60607245的博客
03-28 658
框架原理真的深入某一部分具体的代码和实现方式时，要多注意到细节，不要只能写出一个框架。算法方面很薄弱的，最好多刷一刷，不然影响你的工资和成功率😯在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
Vue3 setup以及setup语法糖的基本使用
qq_43641110的博客
04-06 2370
Vue3 setup以及setup语法糖的基本使用
vue框架中props的typescript用法详解
11-21
什么是typescript typescript 为 javaScript的超集，这意味着它支持所有都JavaScript都语法。它很像JavaScript都强类型版本，除此之外，它还有一些扩展的语法，如interface/module等。 typescript 在编译期会去掉类型和特有语法，生成纯粹的JavaScript。 Typescript 5年内的热度随时间变化的趋势，整体呈现一个上升的趋势。也说明ts越来越受大家的关注了。 在vue中使用typescript时，需要引入vue-property-decorator库来兼容格式。 javascript写法 Vue.componen
vue3中的setup方法
506陈业洪的博客
07-29 2162
props是一个对象，包含父组件传递给子组件的所有数据。在子组件中使用props进行接收。包含配置声明并传入的所有的属性的对象。 也就是说，如果你想通过props的方式输出父组件传递给子组件的值。你需要使用props进行接收配置。即props:{......}。如果你未通过Props进行接受配置，则输出的值是undefined.........
vue3+ts深入组件（一）Props
Asen-coder的博客
11-22 7870
一个组件需要显式声明它所接受的 props，这样 Vue 才能知道外部传入的哪些是 props，哪些是透传 attribute。
Vue3之setup参数介绍
老电影故事的博客
04-27 4015
正如在一个标准组件中所期望的那样，setup函数中的props是响应式的，当传入新的prop时，它将被更新。，所以setup()内部的this的行为与其他选项中的this完全不同。用途：当父组件传递数据给子组件时，子组件不通过props接收，那么父组件传递的数据就到了setup中的context的attrs属性。context是一个普通的JavaScript对象，也就是说，它不是响应式的，这意味着你可以安全地对context使用ES6解构。是响应式的，你不能使用ES6解构，因为它会消除prop的响应式。
vue3在 setup 中使用 props
空晓天
11-17 1万+
vue3在 setup 中使用 props 记录学习和开发中遇到的问题 之前我尝试在 setup 中使用 props 是这样的 export default defineComponent({ setup(props: any) { console.log(props.id) // 输出 undefined } }) 然而 却输出 undefined ，通过思考和查阅资料，与 vue2 做对比，少了 props 声明一步 加上声明就可以了 export default
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0后台管理系统
05-02
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化
05-12
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia
uni-app+Vue3+pinia+uview-plus搭建的项目包
12-28
uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-...
vue3-element-admin-ts::party_popper: 基于 vite + Vue3.0 + Vue-Router 4.0 + Vuex 4.0 + element-plus+Typescript 的后台管理系统vue3-element-admin-ts
04-07
vue3-element-admin:party_popper: 基于 vite + vue3 + Vue-Router 4.0 + Vuex 4.0 + element-plus + typescript 的后台管理系统简介 是一个后台前端解决方案，它基于 和 实现。它使用了最新的前端技术栈，vite + ...
三、VUE数据代理
最新发布
D_A_I_H_A_O的博客
04-29 363
Vue中的数据代理：通过vm对象来代理data对象中属性的操作（读/写）
党务学习|基于SprinBoot+vue的大学生党务学习平台(源码+数据库+文档)
伟庭的博客
04-27 699
大学生党务学习平台管理系统按照操作主体分为管理员和用户。用户的功能等。该系统采用了Mysql数据库，Java语言，Spring Boot框架等技术进行编程实现。大学生党务学习平台管理系统可以提高大学生党务学习平台信息管理问题的解决效率，优化大学生党务学习平台信息处理流程，保证大学生党务学习平台信息数据的安全，它是一个非常可靠，非常安全的应用程序。大学生党务学习平台管理系统；入党申请,党课Mysql数据库；Java语言。
vue 快速入门 系列 —— 玩转 CMS
ZL4120505的博客
04-29 591
例如 src/layouts/BasicLayout.less，里面包含一些基本布局的样式，被 src/layouts/BasicLayout.vue 引用，项目中使用这种布局的页面就不需要再关心整体布局的设置。好比中医发展了好几千年，许多本源的东西老中医也是不清楚的，但我们摸索出一套规则，按照这个能治病，这个就很好。.clearfix() 混合器定义了清除浮动的样式。组件相关的样式，有一些在页面中重复使用的片段或相对独立的功能，你可以提炼成组件，相关的样式也应该提炼出来放在组件中，而不是混淆在页面里。
vue报错：Do not mutate vuex store state outside mutation handlers.
weixin_44021888的博客
04-25 315
vue报错：Do not mutate vuex store state outside mutation handlers.
在vue3+ts+setup语法糖下应该怎么写
05-12
在Vue 3中使用TypeScript和setup语法糖，可以按照以下步骤进行编写： 1. 安装必要的依赖 ```bash npm install vue@next vue-router@next @vue/compiler-sfc@next [email protected] -D ``` 2. 创建一个Vue 3项目，并使用TypeScript编写代码 ```typescript // main.ts import { createApp } from 'vue' import App from './App.vue' import router from './router' const app = createApp(App) app.use(router) app.mount('#app') ``` ```typescript // App.vue <template> <div class="hello"> <h1>{{ msg }}</h1> </div> </template> <script lang="ts"> import { defineComponent } from 'vue' export default defineComponent({ name: 'HelloWorld', setup() { const msg = 'Hello Vue 3 + TypeScript + setup!' return { msg } } }) </script> ``` 3. 在Vue组件中使用setup语法糖 ```typescript // HelloWorld.vue <template> <div class="hello"> <h1>{{ msg }}</h1> </div> </template> <script lang="ts"> import { defineComponent } from 'vue' export default defineComponent({ name: 'HelloWorld', props: { msg: String }, setup(props, { attrs, slots, emit }) { // props: 传入的props // attrs: 组件上除了props之外的属性 // slots: 组件插槽 // emit: 触发父组件事件的方法 return { // 返回组件数据 } } }) </script> ``` 4. 在Vue Router中使用setup语法糖 ```typescript // router.ts import { createRouter, createWebHistory } from 'vue-router' import Home from './views/Home.vue' const router = createRouter({ history: createWebHistory(), routes: [ { path: '/', name: 'Home', component: Home, meta: { // 路由元信息 }, // 在路由组件中使用setup语法糖 setup() { // 返回组件数据 } } ] }) export default router ``` 以上是在Vue 3中使用TypeScript和setup语法糖的基本流程，你可以根据具体的需求进行调整和扩展。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值