11.2 向子组件传递数据

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

11.2.1 基本用法

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

子组件（ChildComponent.vue）

<template>
  <div>
    <p>来自父组件的消息：{{ message }}</p>
  </div>
</template>
<script>
export default {
  props: ['message'] // 声明需要接收的prop
}
</script>

父组件（ParentComponent.vue）

<template>
  <div>
    <ChildComponent message="Hello, Child!" />
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
  components: {
    ChildComponent
  }
}
</script>

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

11.2.2 类型校验与默认值

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

类型校验与默认值示例

<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中使用）

<!-- 父组件 -->
<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）

<template>
  <input
    :value="value"
    @input="$emit('input', $event.target.value)"
  />
</template>
<script>
export default {
  props: ['value']
}
</script>

父组件

<template>
  <CustomInput v-model="inputValue" />
</template>
<script>
import CustomInput from './CustomInput.vue'
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应用。