微信小程序（八）- 关于父子传值

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第8天，点击查看活动详情

本次系列文章参与八月的更文活动，记录一个微信小程序从零到有的开发过程。本文为本系列八篇：关于微信小程序中父子组件传值的归纳总结

父组件向子组件传递数据

1. 在页面(页面.wxml)中 写自定义组件Child的标签代码，通过属性的方式来传递数据

   <Child todata="vivi" ></Child>
   

2. 子组件（组件.js） 要声明 接收数据

     properties: {
   
       // 要接收的属性名
       todata: {
         // 数据的类型
         type: String,
         // 数据的默认值
         value: ""
       }
     }
   

3. 那么，在子组件中，就可以把 todata 看成是 data 中的数据，直接使用即可

    <view>{{todata}}</view>

子组件向父组件传递数据

子组件向父组件传递数据则可以通过触发事件来传递

1. 首先，在子组件的内部触发父组件中的自定义事件，如： dataChange

   this.triggerEvent("dataChange",{index});
   

2. 接着，在父组件的标签文件中，在写子组件的标签代码上绑定一个自定义事件 dataChange

3. 父组件的标签文件中在写子组件的标签代码上 绑定一个自定义事件 写一个自定义事件的回调函数 handledataChange

   <Child binditemChange="handledataChange"></Child>
   

4. 父组件的js文件中，编写 handledataChange接收子组件传递过来的数据，并在此编写它的业务逻辑

     handledataChange(e) {
        这样，就可以获取到子组件传递过来的数据
       const { index } = e.detail;
     
     }
   

slot

slot 类似vue中的插槽功能 让自定义组件接收外部的标签，放入到子组件的内部,在父组件中，我们在自定义组件内部写入什么代码 都会替换子组件中的slot标签

子组件的代码

  <view>
    <slot></slot>
  </view>

父组件传递的标签结构

<Child>
  <!-- 在这里写入什么代码 都会替换子组件中的slot标签 -->
  <text>I am ViVi</text>
</Child>