小程序组件使用

在小程序中，父子组件之间可以通过属性和事件来进行数据的传递。

1. 使用属性传递数据：

   • 父组件可以通过在子组件的标签上绑定属性，将数据传递给子组件。
   • 子组件可以在组件的 properties 属性中定义接收父组件传递的属性，并在组件内部使用。
   • 父组件通过改变绑定的属性的值，可以实现向子组件传递数据的更新。

   例子：
   父组件：

   <parent-component child-data="{{message}}"></parent-component>
   

   子组件：

   // 在子组件的 json 配置文件中定义接收父组件传递的属性
   {
     "properties": {
       "childData": {
         "type": String,
         "value": ""
       }
     },
     ...
   }
   
   // 在子组件的 wxml 模板文件中使用父组件传递的属性
   <view>
     <text>{{childData}}</text>
   </view>
   

2. 使用事件传递数据：

   • 子组件可以通过 triggerEvent 方法触发一个自定义事件，并携带需要传递的数据。
   • 父组件在使用子组件时，可以在子组件的标签中绑定自定义事件的处理函数，并在处理函数中获取子组件传递过来的数据。

   例子：
   子组件：

   Component({
     methods: {
       handleClick: function() {
         this.triggerEvent('myevent', { message: 'Hello World' });
       }
     }
   })
   

   父组件：

   <parent-component bind:myevent="handleEvent"></parent-component>
   

   Page({
     handleEvent: function(event) {
       console.log(event.detail.message);  // 输出：Hello World
     }
   })
   

在面试中，你可以使用以上的代码示例，并详细解释属性传递和事件传递的原理和实现方式。强调父组件通过修改属性值或监听子组件的事件，实现与子组件的数据传递和通信。

希望以上信息对你有帮助！如果还有其他问题，请随时提问。祝你面试顺利！