VUE组件：什么是props？如何在父组件向子组件传递数据？

在Vue中，props 是一种用于从父组件向子组件传递数据的机制。通过使用 props，父组件可以将数据传递给子组件，使得子组件能够使用这些数据。

以下是关于 props 的基本知识和用法：

什么是 Props？

• Props 是 "properties" 的缩写，它是一个在组件之间传递数据的机制。
• 父组件通过在子组件的标签上绑定属性，将数据传递给子组件。子组件通过声明 props 选项来接收这些数据。

如何在父组件向子组件传递数据？

1. 在父组件中绑定 Props：

   在父组件的模板中，通过使用子组件标签的属性来绑定数据：

   <!-- ParentComponent.vue -->
   <template>
     <child-component :message="parentMessage"></child-component>
   </template>
   
   <script>
   import ChildComponent from './ChildComponent.vue';
   
   export default {
     components: {
       ChildComponent,
     },
     data() {
       return {
         parentMessage: 'Hello from parent!',
       };
     },
   };
   </script>
   

   在上述例子中，:message="parentMessage" 将 parentMessage 数据传递给子组件的 message 属性。

2. 在子组件中接收 Props：

   在子组件的 props 选项中声明需要接收的属性：

   <!-- ChildComponent.vue -->
   <template>
     <div>{
       { message }}</div>
   </template>
   
   <script>
   export default {
     props: ['message'],
   };
   </script>
   

   子组件通过声明 props: ['message'] 来指定它接收名为 message 的属性。然后可以在模板中使用 message 来访问父组件传递过来的数据。

动态 Props 和 Prop 验证

你也可以使用动态 Props，例如使用 v-bind 来动态传递属性：

<child-component :dynamic-prop="someData"></child-component>

另外，你可以对 props 进行验证，以确保传递的数据满足特定的条件：

export default {
  props: {
    message: {
      type: String,
      required: true,
    },
  },
};

上述例子中，message 属性必须是字符串类型，而且是必需的，否则将会产生警告。这有助于提高代码的健壮性。