编辑“︁Vue.js Props传递”︁（章节）

= Vue.js Props传递 =

== 介绍 ==
'''Props（属性）'''是Vue.js中父组件向子组件传递数据的一种机制，允许组件之间进行单向数据流通信。Props是只读的，子组件不能直接修改父组件传递的数据，这有助于维护应用的状态一致性。

在Vue.js中，Props是组件注册的自定义属性，父组件通过绑定属性的方式将数据传递给子组件。子组件通过定义Props选项来声明它期望接收的数据。

== 基本用法 ==
=== 定义Props ===
在子组件中，可以通过<code>props</code>选项定义接收的属性。Props可以是数组或对象形式，对象形式允许指定类型、默认值和验证规则。

<syntaxhighlight lang="javascript">
// 子组件 ChildComponent.vue
export default {
  props: ['message'], // 数组形式
  // 或者使用对象形式进行类型检查
  props: {
    message: {
      type: String,
      required: true,
      default: 'Hello Vue!'
    }
  }
}
</syntaxhighlight>

=== 传递Props ===
父组件通过v-bind（或简写<code>:</code>）动态绑定数据到子组件的Props上：

<syntaxhighlight lang="html">
<!-- 父组件 ParentComponent.vue -->
<template>
  <child-component :message="parentMessage" />
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: { ChildComponent },
  data() {
    return {
      parentMessage: 'Data from parent'
    }
  }
}
</script>
</syntaxhighlight>

== Props验证 ==
Vue提供了强大的Props验证机制，可以确保传入数据的正确性：

<syntaxhighlight lang="javascript">
props: {
  // 基础类型检查
  age: Number,
  
  // 多个可能的类型
  id: [String, Number],
  
  // 必填字段
  username: {
    type: String,
    required: true
  },
  
  // 带默认值
  isActive: {
    type: Boolean,
    default: false
  },
  
  // 自定义验证函数
  password: {
    validator(value) {
      return value.length >= 8
    }
  }
}
</syntaxhighlight>

== 单向数据流 ==
Vue遵循单向数据流原则：父组件Props的更新会向下流动到子组件，但反过来不行。如果子组件需要修改Prop数据，应该：

1. 使用Prop作为本地数据的初始值
2. 使用计算属性基于Prop值派生新值
3. 触发事件让父组件修改原始数据

=== 示例：使用Prop作为初始值 ===
<syntaxhighlight lang="javascript">
export default {
  props: ['initialCounter'],
  data() {
    return {
      counter: this.initialCounter
    }
  }
}
</syntaxhighlight>

=== 示例：通过事件修改 ===
<syntaxhighlight lang="html">
<!-- 子组件 -->
<template>
  <button @click="$emit('update:count', count + 1)">+</button>
</template>

<!-- 父组件 -->
<template>
  <child-component :count="parentCount" @update:count="parentCount = $event" />
</template>
</syntaxhighlight>

== 高级用法 ==
=== 传递所有Props ===
使用<code>v-bind="propsObject"</code>可以一次性传递多个Props：

<syntaxhighlight lang="html">
<template>
  <child-component v-bind="userData" />
</template>

<script>
export default {
  data() {
    return {
      userData: {
        name: 'Alice',
        age: 25,
        isAdmin: true
      }
    }
  }
}
</script>
</syntaxhighlight>

=== 非Prop属性 ===
未在子组件中定义的属性会自动添加到子组件的根元素上。可以使用<code>inheritAttrs: false</code>禁用此行为，并通过<code>$attrs</code>访问这些属性。

== 实际案例 ==
=== 用户卡片组件 ===
考虑一个显示用户信息的卡片组件：

<syntaxhighlight lang="html">
<!-- UserCard.vue -->
<template>
  <div class="card">
    <h3>{{ name }}</h3>
    <p>Age: {{ age }}</p>
    <p v-if="isAdmin">Administrator</p>
  </div>
</template>

<script>
export default {
  props: {
    name: String,
    age: Number,
    isAdmin: Boolean
  }
}
</script>

<!-- 使用组件 -->
<user-card 
  name="John Doe" 
  :age="30" 
  :is-admin="true" 
/>
</syntaxhighlight>

=== 动态表单生成器 ===
Props可以用于创建高度可配置的组件：

<syntaxhighlight lang="html">
<!-- DynamicForm.vue -->
<template>
  <form>
    <div v-for="field in fields" :key="field.name">
      <label>{{ field.label }}</label>
      <input 
        :type="field.type" 
        :placeholder="field.placeholder"
        v-model="formData[field.name]"
      >
    </div>
  </form>
</template>

<script>
export default {
  props: {
    fields: {
      type: Array,
      required: true,
      validator: value => value.every(f => 'name' in f && 'type' in f)
    }
  },
  data() {
    return {
      formData: {}
    }
  }
}
</script>
</syntaxhighlight>

== 数据流图示 ==
<mermaid>
graph LR
    A[父组件] -- props --> B[子组件]
    B -- $emit事件 --> A
</mermaid>

== 注意事项 ==
* Props命名：HTML属性不区分大小写，建议使用kebab-case（短横线分隔）命名
* 避免直接修改Prop，这会导致Vue发出警告
* 复杂对象作为Prop时，由于JavaScript的引用特性，子组件修改对象属性会影响父组件状态（应避免）
* 对于需要双向绑定的场景，使用<code>.sync</code>修饰符或v-model

== 总结 ==
Props是Vue组件通信的基础，理解Props的工作机制对于构建可维护的Vue应用至关重要。通过Props验证和单向数据流，可以创建出健壮且易于理解的组件架构。

[[Category:前端框架]]
[[Category:Vue.js]]
[[Category:Vue.js组件基础]]