11.2 向子组件传递数据-Vue.js从入门到精通(三)

当前位置:　首页>> 技术小册>> Vue.js从入门到精通(三)

### 11.2 向子组件传递数据

在Vue.js的应用开发中，组件化开发是提高代码复用性、可维护性和可扩展性的关键手段。组件之间的数据传递是构建复杂应用不可或缺的一部分。在Vue中，父组件向子组件传递数据主要通过`props`（属性）来实现。这一章节将深入探讨如何通过`props`向子组件传递数据，包括基本用法、类型校验、默认值设置以及高级用法，如使用`.sync`修饰符和`v-model`在自定义组件上的应用。

#### 11.2.1 基本用法

在Vue中，子组件通过`props`接收来自父组件的数据。首先，在子组件中声明需要接收的`props`。然后，在父组件中使用自定义属性（这些属性的名称应与子组件中声明的`props`名称一致）将数据传递给子组件。

**子组件（ChildComponent.vue）**

```vue
<template>
  <div>
    <p>来自父组件的消息：{{ message }}</p>
  </div>
</template>

**父组件（ParentComponent.vue）**

```vue
<template>
  <div>
    <ChildComponent message="Hello, Child!" />
  </div>
</template>

export default {
  components: {
    ChildComponent
  }
}
</script>
```

在这个例子中，父组件`ParentComponent`通过`message`属性向子组件`ChildComponent`传递了一个字符串`"Hello, Child!"`。子组件通过`props`中的`message`接收这个数据，并显示在模板中。

#### 11.2.2 类型校验与默认值

为了确保组件的健壮性，Vue允许你为`props`指定类型校验和默认值。这样做可以在组件接收不符合预期的`props`时提前给出警告或错误，同时确保组件在没有接收到`props`时也能正常工作。

**类型校验与默认值示例**

```vue
<script>
export default {
  props: {
    // 基础类型校验
    propA: Number,
    // 多种类型校验（使用数组）
    propB: [String, Number],
    // 必填项校验
    propC: {
      type: String,
      required: true
    },
    // 默认值
    propD: {
      type: String,
      default: 'default value'
    },
    // 带有验证函数的复杂校验
    propE: {
      type: Object,
      default: function () {
        return { message: 'hello' };
      },
      validator: function (value) {
        return value.message.length > 5;
      }
    }
  }
}
</script>
```

在这个例子中，`propA`和`propB`分别进行了基础类型和多种类型的校验；`propC`被标记为必填项，并指定了类型为`String`；`propD`设置了默认值`'default value'`；而`propE`则展示了如何结合使用默认值和验证函数，以确保传递给`propE`的对象中包含一个长度大于5的`message`属性。

#### 11.2.3 使用`.sync`修饰符

在Vue 2.3.0+中，`.sync`修饰符被引入，用以简化子组件更新父组件数据的过程。然而，需要注意的是，Vue 3中`.sync`修饰符的用法有所变化，且Vue官方推荐直接使用`v-model`或`update:xxx`事件进行父子组件间的双向绑定或数据更新。

在Vue 2中，`.sync`修饰符可以自动监听子组件触发的`update:myPropName`事件，并更新对应的`prop`值。但在Vue 3中，更推荐使用`v-model`或显式地监听`update:xxx`事件来实现相同的功能。

**Vue 2中使用.sync的示例（已不推荐在Vue 3中使用）**

```vue

<ChildComponent :some-prop.sync="parentProp" />

this.$emit('update:someProp', newValue);
```

在Vue 3中，应直接监听`update:xxx`事件或使用`v-model`（如果适用）。

#### 11.2.4 使用`v-model`在自定义组件上

在Vue 2.2.0+中，`v-model`在自定义组件上的使用被扩展，允许组件接受一个`value`的`prop`，并在需要更新这个值时触发一个`input`事件。这一特性在Vue 3中得到了保留和增强。

**自定义组件使用`v-model`**

**子组件（CustomInput.vue）**

```vue
<template>
  <input
    :value="value"
    @input="$emit('input', $event.target.value)"
  />
</template>

**父组件**

```vue
<template>
  <CustomInput v-model="inputValue" />
</template>

export default {
  components: {
    CustomInput
  },
  data() {
    return {
      inputValue: ''
    }
  }
}
</script>
```

在这个例子中，`CustomInput`组件接收一个`value`的`prop`，并在内部`<input>`元素的值变化时，通过`$emit`触发一个`input`事件，将新的值传递给父组件。父组件则通过`v-model`指令自动监听这个`input`事件，并更新`inputValue`数据属性。

#### 11.2.5 结论

向子组件传递数据是Vue.js组件化开发中的基础且重要的一环。通过`props`，我们可以实现父组件到子组件的单向数据流，同时通过类型校验、默认值设置和`.sync`修饰符（在Vue 3中推荐使用`v-model`或`update:xxx`事件）等高级特性，增强组件的健壮性和易用性。理解并掌握这些技术，将有助于你更高效地构建复杂且可维护的Vue.js应用。

该分类下的相关小册推荐：

Vue面试指南

TypeScript和Vue从入门到精通(五)

Vue源码完全解析

Vue原理与源码解析

Vue.js从入门到精通(一)

移动端开发指南

Vue.js从入门到精通(四)

vuejs组件实例与底层原理精讲

vue项目构建基础入门与实战

VUE组件基础与实战

Vue3技术解密

TypeScript和Vue从入门到精通(四)