const props = defineProps({visibleNum: propTypes.number.def(3) <style> .top-search-container .el-col:nth-child(n + v-bind(props.visibleNum) + 1) { margin-top: 10px; }

defineProps 用于定义 Vue 3 子组件的 props，提供类型安全和更好的开发体验。

defineProps 的使用

• 类型安全：defineProps 允许使用 TypeScript 或 PropTypes 明确指定 props 类型和默认值15。
• 定义方式：在子组件的 setup 函数中使用 defineProps 来定义 props，例如 defineProps<{ message: string; count: number; }>()1。
• 接收父组件 props：子组件通过 defineProps 接收父组件传递的 props 数据，并在模板中使用1。

样式绑定中的使用

• 动态样式：在模板的 <style> 标签中，可以使用 v-bind 来动态绑定 CSS 选择器中的数值，如 v-bind(props.visibleNum)1。

总结

defineProps 在 Vue 3 中是定义子组件 props 的推荐方式，它不仅提供了类型安全，还允许在模板和样式中灵活使用 props 数据。157