vue中props

前端开发 2025-01-07 4

在 Vue.js 中，`props` 是一个自界说特点，答应你从父组件向子组件传递数据。`props` 是 Vue 组件的一个中心特性，它答应子组件接纳来自父组件的数据。

根本用法

1. 界说 Props：在子组件中，你能够在组件的 `props` 选项中界说你想要接纳的特点。这些特点能够有一个默许值，也能够指定类型和是否是有必要的。

```javascript Vue.component, template: '{{ message }}' }qwe2; ```

2. 传递 Props：在父组件中，你能够经过 `vbind` 或简写 `:` 来传递数据给子组件。

```html ```

```javascript new Vue; ```

Prop 类型

字符串：默许类型数字布尔值数组目标函数自界说结构函数

Prop 验证

Vue 供给了一种方法来验证传入的 prop 的类型。当传入的 prop 不符合希望的类型时，Vue 会宣布正告。

```javascriptVue.component propA: Number, // 多个或许的类型 propB: , // 必填的字符串 propC: { type: String, required: true }, // 带有默许值的数字 propD: { type: Number, default: 100 }, // 带有默许值的目标 propE: { type: Object, // 目标或数组默许值有必要从一个工厂函数回来 default: function { return { message: 'hello' }; } }, // 自界说验证函数 propF: { validator: function { // 这个值有必要匹配下列字符串中的一个 return .indexOf !== 1 } } }}qwe2;```

Prop 的大小写

HTML 中的特点名是大小写不灵敏的，所以当运用非字符串模板时，camelCase 的 prop 名需求转换为 kebabcase ：

```javascriptVue.component, template: '{{ myMessage }}'}qwe2;

// 在 HTML 中是 kebabcase```

Prop 传递规矩

单向数据流：子组件不能直接修正父组件传递给它的 prop。如果子组件需求改动数据，应该运用事情向父组件宣布一个恳求。 Vue 实例的特点：Vue 实例的特点，如 `data`、`computed`、`methods` 等，不能用作 prop。

Prop 的高档用法

Prop 修饰符：例如 `.sync` 能够用于双向绑定一个 prop。自界说事情：用于子组件向父组件传递数据。

经过合理地运用 `props`，能够有效地在 Vue 组件之间传递数据，一起坚持组件的解耦和可重用性。

Vue.js 中深化了解 Props：传递数据与组件通讯的艺术