在Vue中，组件的props属性用于定义组件可以接收的外部数据，这些数据来自父组件并传递给子组件。

props可以是一个数组或对象，用于指定子组件接受的属性名称。通过在父组件中使用子组件时，通过属性的方式将数据传递给子组件，属性名即为在子组件中声明的props的属性名称。子组件可以在其模板中通过props属性访问父组件传递的数据。props的作用是向子组件传递数据，允许传递任意数量的prop和任意类型的prop。在Vue 3和TypeScript中，深入了解组件的Props是非常重要的，因为可以在组件的选项中使用props属性来定义Props的类型和验证规则。

使用如下：

1、在使用子组件的父组件传递数据

<RefreshBtn @onFreshEvent="getData" :newsRefresh="newsRefresh"/>

2、子组件数据应用，使用props确定接收数据的类型和默认值，在props中还可以进行数据校验。

<template><button @click="refreshHandle">刷新</button><p>父页面数据：{{newsRefresh}}</p>
</template><script>
export default {name: "RefreshBtn",props: {newsRefresh: {type: String,default: ""}},data() {return {target: 1}},methods: {refreshHandle() {this.$emit("onFreshEvent",this.target);this.target += 1;}}
}
</script>

props完整的校验写法：

props: {校验的属性名: {type: 类型,  // Number String Boolean ...required: true, // 是否必填default: 默认值, // 默认值validator (value) {// 自定义校验逻辑return 是否通过校验}}
},

<script>
export default {// 完整写法（类型、默认值、非空、自定义校验）props: {w: {type: Number,//required: true,default: 0,validator(val) {// console.log(val)if (val >= 100 || val <= 0) {console.error('传入的范围必须是0-100之间')return false} else {return true}},},},
}
</script>