网络优化工程师工资seo自然排名优化
Vue 3 的
Vue3的语法糖有很多，目前在不断写些前端的代码，我写到哪儿就总结到哪儿吧！
1、defineProps
- defineProps 是一个用来定义组件 props 的函数。Props 是父组件向子组件传递数据的一种机制，借助 props，父组件能把数据传递给子组件，让子组件使用这些数据进行渲染或者逻辑处理。
例如，子组件中的代码如下
const props = defineProps({orderType: {type: String,default: 'order_self_drive',},orderNo: String,code: String,
})
- defineProps：这是 Vue 3 提供的一个 API，用于在script setup 语法糖中定义组件的 props。它接收一个对象作为参数，该对象描述了组件期望接收的 props。
- orderType：定义了一个名为 orderType 的 prop。
- type: String：指定 orderType 的类型为字符串。Vue 会在运行时对传入的 orderType 值进行类型检查，若类型不匹配会给出警告。
- default: ‘order_self_drive’：设置 orderType 的默认值为 ‘order_self_drive’。当父组件没有传递 orderType 时，子组件会使用这个默认值。
- orderNo：定义了一个名为 orderNo 的 prop，类型为字符串。这里使用了简写形式，等同于 { type: String }。由于没有设置 default 属性，若父组件没有传递 orderNo，其值为 undefined。
- code：定义了一个名为 code 的 prop，类型为字符串，同样是简写形式。若父组件未传递 code，其值为 undefined。
父组件代码
<SelfDriveInfo
v-else-if="item.orderType === 'order_self_drive'"
ref="bizFormRef"
:order-type="item.orderType"
:order-no="orderNo"
:code="item.code" />
- 属性传递：父组件 register.vue 给子组件传递了三个属性：
:order-type：对应子组件里 defineProps 中的 orderType。
:order-no：对应子组件里 defineProps 中的 orderNo。
:code：对应子组件里 defineProps 中的 code。
Tips: 有人问为啥不把属性对应上？
- 虽然直接写 :orderType=“item.orderType” 在 Vue 3 的单文件组件中可能可行，但为了保证代码的兼容性和遵循 HTML 规范，推荐使用 kebab-case 命名 :order-type 来传递属性，这样能确保父组件和子组件之间的 props 正确匹配。
总结
defineProps 让组件能明确声明它期望从父组件接收的 props，并且能对这些 props 进行类型检查和设置默认值。这样能提高组件的可维护性和健壮性，让父组件和子组件之间的数据传递更加清晰和安全。