Vue 中父组件向子组件传递数据？

在 Vue 中，父组件向子组件传递数据可以通过 props 进行传递。

1. 父组件：

   • 在父组件中通过 props 绑定的方式将数据传递给子组件。
   • 在子组件标签上使用属性，属性名为子组件中定义的 prop 名称，值为要传递的数据。

   <!-- ParentComponent.vue -->
   <template>
     <ChildComponent :propName="parentData"></ChildComponent>
   </template>
   
   <script>
   import ChildComponent from './ChildComponent.vue';
   
   export default {
     components: {
       ChildComponent
     },
     data() {
       return {
         parentData: 'Data from parent'
       };
     }
   }
   </script>
   

2. 子组件：

   • 在子组件中通过 props 接收从父组件传递过来的数据。
   • 在子组件的 props 中声明接收的属性名。

   <!-- ChildComponent.vue -->
   <template>
     <div>{{ propName }}</div>
   </template>
   
   <script>
   export default {
     props: {
       propName: String // 声明要接收的数据类型
     }
   }
   </script>
   

通过这种方式，父组件就可以将数据通过 props 传递给子组件，并在子组件中通过 props 接收并使用这些数据。