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>