实现vue中的prop

在 Vue 中实现 prop

定义 prop
在子组件中通过 props 选项定义 prop，可以指定类型、默认值和验证规则。例如：

props: {
  title: {
    type: String,
    required: true
  },
  count: {
    type: Number,
    default: 0
  },
  isActive: {
    type: Boolean,
    default: false
  }
}

传递 prop
在父组件中通过属性绑定的方式传递数据给子组件。静态值直接传递，动态值用 v-bind 或简写 :：

<ChildComponent title="静态标题" :count="dynamicCount" :is-active="true" />

Prop 类型验证
Vue 支持多种类型验证，包括 String、Number、Boolean、Array、Object、Date、Function 和 Symbol。也可通过自定义验证函数：

props: {
  value: {
    validator(value) {
      return ['success', 'warning', 'danger'].includes(value)
    }
  }
}

单向数据流
Prop 是单向绑定的，子组件不应直接修改 prop 值。如需修改，应在子组件中使用局部变量或触发事件通知父组件更新：

data() {
  return {
    localCount: this.count
  }
},
methods: {
  updateCount() {
    this.$emit('update:count', this.localCount)
  }
}

非 Prop 属性
未在 props 中定义的属性会自动绑定到子组件的根元素上。可通过 inheritAttrs: false 和 $attrs 手动控制：

export default {
  inheritAttrs: false,
  mounted() {
    console.log(this.$attrs)
  }
}

注意事项

• Prop 命名应使用 camelCase（JavaScript）和 kebab-case（HTML）。
• 对象或数组的默认值需通过工厂函数返回：

  default: () => ({ key: 'value' })

• 性能敏感场景避免传递复杂对象，优先使用扁平数据结构。