vue中父组件给子组件传递数据

1. 基本原理

   • 在Vue中，父组件向子组件传递数据是通过自定义属性（props）来实现的。props是一个数组或对象，用于接收从父组件传递过来的数据。

2. 使用步骤

   • 定义子组件的props属性
     • 在子组件的JavaScript部分（可以是Vue.extend方式创建组件或者ES6的export default方式）定义props。
     • 例如，有一个简单的子组件ChildComponent.vue，它接收一个名为message的数据：

       export default {
         props: {
           message: {
             type: String,
             required: true
           }
         },
         // 组件的其他选项，如模板、方法等
         template: '<div>{{ message }}</div>'
       }
       

     • 这里props中的message定义了接收的数据类型为String，并且是必须的（required: true）。如果数据不是必须的，可以设置required: false，并且可以设置默认值default，例如：

       export default {
         props: {
           count: {
             type: Number,
             default: 0
           }
         },
         template: '<div>Count: {{ count }}</div>'
       }
       

   • 在父组件中使用子组件并传递数据
     • 在父组件的模板中使用子组件，并通过自定义属性的方式传递数据。例如，有一个父组件ParentComponent.vue：

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

     • 在父组件的模板中，<ChildComponent :message="parentMessage" />这一行就是使用子组件并传递数据。:（v - bind的缩写）用于动态绑定数据，将父组件中的parentMessage数据传递给子组件的message属性。

3. 动态传递数据

   • 除了传递静态数据，还可以动态传递数据。例如，当父组件中的数据根据用户交互或者其他事件发生变化时，传递给子组件的数据也会随之更新。
   • 假设父组件中有一个按钮，点击按钮可以改变传递给子组件的数据：

     <template>
       <div>
         <button @click="changeMessage">Change Message</button>
         <ChildComponent :message="parentMessage" />
       </div>
     </template>
     <script>
     import ChildComponent from './ChildComponent.vue';
     export default {
       components: {
         ChildComponent
       },
       data() {
         return {
           parentMessage: 'Initial Message'
         };
       },
       methods: {
         changeMessage() {
           this.parentMessage = 'New Message';
         }
       }
     };
     </script>
     

     • 这里定义了一个changeMessage方法，当按钮被点击时，会改变parentMessage的值，子组件接收到的message数据也会相应地更新，因为Vue会自动检测数据的变化并更新DOM。

4. 对象和数组的传递

   • 可以传递对象和数组等复杂数据类型。例如，父组件传递一个包含用户信息的对象给子组件：

     <template>
       <div>
         <ChildComponent :user="userInfo" />
       </div>
     </template>
     <script>
     import ChildComponent from './ChildComponent.vue';
     export default {
       components: {
         ChildComponent
       },
       data() {
         return {
           userInfo: {
             name: 'John',
             age: 30
           }
         };
       }
     };
     </script>
     

     • 在子组件中，可以像访问普通属性一样访问对象的属性：

       export default {
         props: {
           user: {
             type: Object,
             required: true
           }
         },
         template: '<div>Name: {{ user.name }}, Age: {{ user.age }}</div>'
       }
       

   • 对于数组的传递也是类似的，父组件传递一个数组，子组件通过props接收并使用。例如，父组件传递一个商品列表给子组件：

     <template>
       <div>
         <ChildComponent :products="productList" />
       </div>
     </template>
     <script>
     import ChildComponent from './ChildComponent.vue';
     export default {
       components: {
         ChildComponent
       },
       data() {
         return {
           productList: [
             {
               id: 1,
               name: 'Product 1',
               price: 10.0
             },
             {
               id: 2,
               name: 'Product 2',
               price: 20.0
             }
           ]
         };
       }
     };
     </script>
     

     • 子组件可以遍历数组并显示商品信息：

       export default {
         props: {
           products: {
             type: Array,
             required: true
           }
         },
         template: '<div v - for="product in products">{{ product.name }} - ${{ product.price }}</div>'
       }
       

原文地址：https://blog.csdn.net/xuanyuanjiaqi/article/details/142813692

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！