uniapp 父子组件传递参数

在uni-app开发中，父子组件间的数据传递主要有两种常用方式：

1. 父传子 (Parent to Child)：

   • Props：这是最常见的方法，用于父组件向子组件传递数据。在子组件中定义接收参数的props，然后在父组件使用子组件时将数据作为属性传入。

   示例：

   • 在子组件（Child.vue）中声明props：

     // Child.vue
     export default {
       props: {
         parentMessage: String // 声明一个名为parentMessage的prop，类型为String
       }
     }
     

   • 在父组件模板中，将数据传递给子组件：

     <!-- Parent.vue -->
     <child :parent-message="messageFromParent"></child>
     

     这里 :parent-message 是 prop 绑定的语法糖，意味着它会将父组件的 messageFromParent 数据属性传递给子组件的 parentMessage prop。

2. 子传父 (Child to Parent)：

   • 自定义事件 Emit：子组件通过 $emit 触发一个自定义事件，并附带需要传递的参数，父组件则通过监听该事件接收并处理数据。

   示例：

   • 在子组件（Child.vue）中触发事件：

     // Child.vue
     methods: {
       childMethod() {
         const dataToSend = 'some data';
         this.$emit('child-to-parent', dataToSend);
       }
     }
     

   • 在父组件模板中监听事件：

     <!-- Parent.vue -->
     <child @child-to-parent="handleDataFromChild"></child>
     
     // 父组件对应的methods
     methods: {
       handleDataFromChild(receivedData) {
         console.log('Received from child:', receivedData);
         // 对接收到的数据进行相应处理
       }
     }
     

另外，虽然不是专门针对父子组件数据传递的标准方法，但有时候也会用到 ref 来获取对子组件的引用，从而可以直接调用子组件的方法或访问其内部状态，这通常是在需要进行更复杂交互时采用的方式。不过，尽量遵循单向数据流原则，避免过度依赖这种方式来通信。