实现vue中的prop

定义 Props

在 Vue 组件中，通过 props 选项定义组件可以接收的属性。支持数组或对象形式定义。数组形式仅列出属性名，对象形式可以进一步指定类型、默认值等配置。

// 数组形式
props: ['title', 'content']

// 对象形式
props: {
  title: String,
  content: {
    type: String,
    default: 'Default content',
    required: true
  }
}

传递 Props

在父组件中，通过类似 HTML 属性的方式传递数据给子组件。可以使用静态值或动态绑定（v-bind）。

<ChildComponent title="Static Title" :content="dynamicContent" />

类型验证

通过对象形式的 props 可以指定类型验证，支持多种原生构造函数（如 String、Number、Boolean、Array、Object、Date、Function、Symbol）。

props: {
  age: Number,
  isValid: Boolean,
  tags: Array,
  user: Object
}

默认值与必填

通过 default 设置默认值，required 标记属性是否必填。默认值为对象或数组时，需使用工厂函数返回。

props: {
  count: {
    type: Number,
    default: 0
  },
  items: {
    type: Array,
    default: () => []
  },
  name: {
    type: String,
    required: true
  }
}

自定义验证

通过 validator 函数实现自定义逻辑验证，返回 true 或 false。

props: {
  score: {
    validator(value) {
      return value >= 0 && value <= 100
    }
  }
}

单向数据流

Vue 的 props 遵循单向数据流原则，子组件不应直接修改 props 的值。需通过事件或本地数据副本处理。

export default {
  props: ['initialValue'],
  data() {
    return {
      localValue: this.initialValue
    }
  }
}