Vue使用Props实现组件数据交互的示例代码

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

<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: {
  校验的属性名: {
    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>