微信小程序父子传值

微信小程序父子组件传值

 

父组件向子组件传值

父组件wxml

 <!-- 
   1 父组件(页面) 向子组件 传递数据 通过 标签属性的方式来传递
     1 在子组件上进行接收
     2 把这个数据当成是data中的数据直接用即可
  -->
 <Tabs tabs="{{tabs}}" binditemChange="handleItemChange" />

子组件js

 /**
    * 里面存放的是 要从父组件中接收的数据
    */
   properties: {
     // 要接收的数据的名称
     aaa: {
       // type  要接收的数据的类型 
       type: String,
       // value  默认值没传的话就是默认值
       value: ""
     }
   },

子组件的wxml

   <view>
     {{aaa}}
   </view>

 

子组件向父组件传值

父组件wxml

 <!-- 
   ......
   2 子向父传递数据 通过事件的方式传递
     1 在子组件的标签上加入一个 自定义事件 绑定一个回调函数
   
  -->
 <Tabs tabs="{{tabs}}" binditemChange="handleItemChange" aaa="123">
 ​
 <block wx:if="{{tabs[0].isActive}}">0 </block>
 <block wx:elif="{{tabs[1].isActive}}">1 </block>
 <block wx:elif="{{tabs[2].isActive}}">2 </block>
 <block wx:else>3</block>
  
 </Tabs>

父组件js

 // 自定义事件 用来接收子组件传递的数据的
   handleItemChange(e) {
     // 接收传递过来的参数
     const { index } = e.detail;
     let { tabs } = this.data;
     tabs.forEach((v, i) => i === index ? v.isActive = true : v.isActive = false);
     this.setData({
       tabs
     })
   }

子组件wxml

 <view class="tabs">
   <view class="tabs_title">
     <view 
     wx:for="{{tabs}}"
     wx:key="id"
     class="title_item {{item.isActive?'active':''}}"
     bindtap="hanldeItemTap"
     data-index="{{index}}"
     >
     {{item.name}}
   </view>
   </view>
   <view class="tabs_content">
     <!-- 
       slot 标签 其实就是一个占位符 插槽
       等到 父组件调用 子组件的时候 再传递 标签过来 最终 这些被传递的标签
       就会替换 slot 插槽的位置 
      -->
     <slot></slot>
   </view>
 </view>

子组件js

 

 methods: {
     hanldeItemTap(e) {
       /* 
       ......
        5 点击事件触发的时候 
           触发父组件中的自定义事件 同时传递数据给  父组件  
           this.triggerEvent("父组件自定义事件的名称",要传递的参数)
        */
       //  2 获取索引
       const { index } = e.currentTarget.dataset;
       // 5 触发父组件中的自定义事件 同时传递数据给  
       this.triggerEvent("itemChange", { index });
     }
   }