Vue 中如何将数据从父组件传递到子组件？

在 Vue 中，你可以通过以下几种方式将数据从父组件传递到子组件：

1. Props（属性）：通过 props 向子组件传递数据。在父组件中使用子组件时，可以在子组件上声明 props，并将数据作为 props 的属性传递给子组件。

   <!-- 在父组件中 -->
   <template>
     <ChildComponent :propName="parentData"></ChildComponent>
   </template>
   
   <script>
   import ChildComponent from './ChildComponent.vue';
   
   export default {
     components: {
       ChildComponent,
     },
     data() {
       return {
         parentData: 'Some data from parent',
       };
     },
   };
   </script>
   
   <!-- 在子组件中 -->
   <script>
   export default {
     props: {
       propName: String, // 声明接收的 prop 类型
     },
   };
   </script>
   

2. 事件（Event）：通过自定义事件在父组件中触发事件，并在子组件中监听该事件来传递数据。

   <!-- 在父组件中 -->
   <template>
     <ChildComponent @customEvent="handleEvent"></ChildComponent>
   </template>
   
   <script>
   import ChildComponent from './ChildComponent.vue';
   
   export default {
     components: {
       ChildComponent,
     },
     methods: {
       handleEvent(data) {
         // 处理从子组件传递过来的数据
       },
     },
   };
   </script>
   
   <!-- 在子组件中 -->
   <script>
   export default {
     methods: {
       sendDataToParent() {
         this.$emit('customEvent', 'Data from child');
       },
     },
   };
   </script>
   

这些方法允许你在 Vue 中很灵活地传递数据从父组件到子组件，你可以根据需要选择合适的方式进行数据传递。