如何使用 “props” 选项将数据传递给子组件？

在Vue.js中，props 是一种特殊的属性，用于从父组件向子组件传递数据。使用 props 可以帮助我们构建可重用和维护性好的组件。

如何定义和使用 props：

1. 在子组件中定义 props

   首先，在子组件中，我们需要定义接收的 props。这可以通过在组件的选项中添加 props 属性来实现，props 可以是数组或对象形式。

   javascript
   // 子组件 ChildComponent.vue
   <script>
   export default {
     props: ['message']
   }
   </script>

   这里，子组件期望从父组件接收一个名为 message 的 prop。

2. 在父组件中传递数据

   在父组件中，我们将数据通过子组件的标签属性传递。确保你传递的属性名与子组件中定义的 props 名称匹配。

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

   在这个例子中，父组件通过 :message="parentMessage" 将其数据 parentMessage 传递给子组件。这里使用了 v-bind 的缩写 :，这是推荐的绑定动态数据的方式。

使用对象形式的 props：

当你需要校验传入的数据类型或设置默认值时，可以使用对象形式来定义 props。

javascript
// 子组件 ChildComponent.vue
<script>
export default {
  props: {
    message: {
      type: String,
      required: true,
      default: 'Default message'
    }
  }
}
</script>

在这个版本中，我们指定了 prop message 应该是一个字符串（String），是必需的，并且定义了一个默认值。

总结：

通过这样的方式，Vue.js 中的 props 提供了一种简单而强大的方法来实现父子组件间的数据传递。这不仅使得组件更加独立和可重用，而且还增强了整个应用的可维护性。