Vue.js 中的组件传递数据方式：from parents to children

在 Vue.js 中，组件之间的数据传递具有很大的灵活性。我们可以通过多种方式来实现组件间的信息传递， 如：

- 父组件通过 props 将数据传递给子组件

- 子组件通过 $emit 发送事件通知父组件

- 使用 Vuex 中的状态管理模式

其中，最常见的是父组件传递数据给子组件，本文就重点介绍这种方式。

一、通过 Props 传递数据

// Parent.vue
<template>
  <div>
    <ChildComponent :message="message"></ChildComponent>
  </div>
</template>

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

  export default {
    name: 'ParentComponent',
    data() {
      return {
        message: 'Hello World'
      };
    },
    components: {
      ChildComponent
    }
  };
</script>

// Child.vue
<template>
  <div>
    {{ message }}
  </div>
</template>

<script>
  export default {
    name: 'ChildComponent',
    props: {
      message: String
    }
  };
</script>

在这个例子中，我们创建了一个父组件 Parent.vue， 一个子组件 Child.vue。在父组件中，我们定义了一个名为 message 的属性并将其传递给子组件作为 props。在子组件中，我们使用 props 接收父组件传递的数据。

二、通过 v-bind 动态绑定 Props 的值

有些时候，我们需要在渲染组件的时候动态地绑定 Props 的值。这时候我们可以使用 v-bind。比如：

// Parent.vue
<template>
  <div>
    <ChildComponent :message="message"></ChildComponent>
    <ChildComponent :message="dynamicMessage"></ChildComponent>
  </div>
</template>

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

  export default {
    name: 'ParentComponent',
    data() {
      return {
        message: 'Hello World'
      };
    },
    components: {
      ChildComponent
    },
    computed: {
      dynamicMessage() {
        return 'Goodbye World';
      }
    }
  };
</script>

在这个例子中，我们除了传递一个 props，还通过计算属性的方式传递了另一个 props。

三、Props 的验证

在 Parent.vue 里，我们可以通过声明子组件的 props，从而规定其数据类型。

// Parent.vue
<ChildComponent :number-prop="1"></ChildComponent>

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

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

// Child.vue
<script>
  export default {
    name: 'ChildComponent',
    props: {
      // 限定 Message 的类型
      message: {
        type: String,
        required: true
      },
      // 限定 numberProp 必须为数字类型
      numberProp: {
        type: Number,
        default: 100,
        validator: function (value) {
          return value >= 1 && value<= 10;
        }
      }
    }
  };
</script>

需要注意的是，如果一个子组件中声明了 props 中的某个属性，而父组件没有传递这个属性，则会报错。同样的，如果父组件传递的属性类型与子组件声明的属性类型不符合，也会报错。

这里的 validator 是一个返回布尔值的函数，通过这个函数我们就可以对传递的 Props 进行更精细的控制，例如对其取值范围、复杂的业务逻辑或者类型限制等等。

总结

本文主要介绍了 Vue.js 中父组件向子组件传递数据的方式（Props），并且对 Props 的验证方式进行了详细的讲解。通过使用 Props，我们可以更加灵活地传递数据，同时确保传递的数据类型是正确的。