当前位置：首页 > news >正文

Vue学习笔记集--props组件

news 来源：原创 2025/6/13 1:32:56

props

在 Vue.js 中，props 是父组件向子组件传递数据的主要机制。以下是关于 Vue props 的详细总结：

1. 基本用法

定义 Props：在子组件中，通过 props 选项声明接收的属性。

// 数组形式（简单定义）
props: ['title', 'content']

// 对象形式（详细配置）
props: {
  title: {
    type: String,
    required: true,
    default: '默认标题'
  },
  count: {
    type: Number,
    default: 0
  }
}

2. 类型检查

支持的类型：String, Number, Boolean, Array, Object, Date, Function, Symbol，或自定义构造函数。
多类型：使用数组表示多个可能的类型。
```
props: {
  value: [String, Number]
}
```

3. 验证与默认值

必填项：required: true 表示父组件必须传递该 prop。

默认值：default 指定默认值（引用类型需用工厂函数返回）。

props: {
  items: {
    type: Array,
    default: () => []
  }
}

自定义验证：通过 validator 函数验证值。

props: {
  status: {
    validator: (value) => ['success', 'error'].includes(value)
  }
}

4. 单向数据流

禁止直接修改：子组件不能直接修改 prop 的值，否则会触发警告。
解决方案：
- 事件通知：子组件通过 $emit 触发事件，父组件更新数据。
- 内部状态：用 prop 初始化子组件的 data 或 computed 属性。
```
props: ['initialValue'],
data() {
  return { localValue: this.initialValue };
}
```

5. 命名规范

父组件传递：使用 kebab-case（短横线分隔），如 <child user-name="Alice">。
子组件定义：使用 camelCase（驼峰式），如 props: { userName: String }。

6. 高级用法

传递对象所有属性：使用 v-bind="object" 批量传递。

<template>
  <child-component v-bind="userData" />
</template>
<script>
export default {
  data() {
    return {
      userData: { name: 'Alice', age: 30 }
    };
  }
};
</script>

非 Prop 属性：未在 props 中声明的属性会绑定到子组件的根元素。可通过 inheritAttrs: false 和 $attrs 手动处理。
```
<template>
  <div>
    <input v-bind="$attrs" />
  </div>
</template>
<script>
export default {
  inheritAttrs: false
};
</script>
```

7. 注意事项

引用类型默认值：对象或数组的默认值需用工厂函数返回，避免多个实例共享同一引用。
响应式更新：直接修改对象/数组的属性会影响父组件（因引用相同）。建议通过事件通知父组件修改。

8. Vue 3 中的变化

Composition API：使用 defineProps 声明 props。

<script setup>
const props = defineProps({
  title: String
});
</script>

.sync修饰符

在 Vue.js 中，.sync 修饰符是一种简化父子组件间双向数据绑定的语法糖，用于更高效地实现子组件修改父组件数据的需求（遵循单向数据流原则）。以下是详细总结：

1. 解决的问题

背景：Vue 的 props 是单向数据流，子组件不能直接修改父组件传递的值。
传统方案：需要通过 props + $emit 事件通知父组件修改数据。
.sync 的作用：简化这种模式的代码，提供更简洁的双向绑定语法。

2. 基本用法（Vue 2.x）

父组件

使用 .sync 修饰符绑定属性：

<template>
  <ChildComponent :title.sync="parentTitle" />
</template>

等价于：

<template>
  <ChildComponent 
    :title="parentTitle" 
    @update:title="newValue => parentTitle = newValue" 
  />
</template>

子组件

通过 $emit 触发 update:xxx 事件修改父组件数据：

this.$emit('update:title', newTitleValue);

3. Vue 3 中的变化

在 Vue 3 中，.sync 修饰符被废弃，取而代之的是 v-model 的增强功能：

Vue 2 的 .sync 等价于 Vue 3 的 v-model。

Vue 3 支持多个 v-model 绑定，例如：

<ChildComponent v-model:title="parentTitle" v-model:count="parentCount" />

子组件通过 emit('update:title', newValue) 修改数据。

4. 示例对比

Vue 2.x 中使用 `.sync`

<!-- 父组件 -->
<template>
  <Child :count.sync="parentCount" />
</template>

<script>
export default {
  data() {
    return { parentCount: 0 };
  }
};
</script>

<!-- 子组件 -->
<script>
export default {
  props: ['count'],
  methods: {
    increment() {
      this.$emit('update:count', this.count + 1);
    }
  }
};
</script>

Vue 3 中使用 `v-model`

<!-- 父组件 -->
<template>
  <Child v-model:count="parentCount" />
</template>

<!-- 子组件 -->
<script setup>
const props = defineProps(['count']);
const emit = defineEmits(['update:count']);

const increment = () => {
  emit('update:count', props.count + 1);
};
</script>

5. 核心原理

.sync 本质上是语法糖，自动为父组件生成一个监听 update:xxx 事件的处理函数。
单向数据流的合法扩展：子组件不直接修改 prop，而是通过事件通知父组件修改。

6. 使用场景

需要子组件修改父组件数据的场景（如表单控件、开关状态等）。
替代简单的自定义事件，减少样板代码。

7. 注意事项

命名规范：
- 事件名必须是 update:propName 格式。
- 属性名需使用 camelCase（Vue 3 中支持 kebab-case，但建议统一风格）。
引用类型数据：
- 如果 prop 是对象或数组，直接修改内部属性会违反单向数据流原则（因为父组件数据会同步变化）。建议通过事件通知父组件修改。
Vue 2 与 Vue 3 的兼容性：
- Vue 2 中推荐使用 .sync，但 Vue 3 中需改用 v-model。