小程序组件传值通讯

学习vue或者react的同学都知道 组件之间是可以进行传值通讯的 对于刚刚接触小程序的同学而言 可能不知道 和vue传递方式几乎是一样的 会vue的同学应该很 容易理解 下面就带着同学们一起来看下吧

假设有一个parent和一个child 

首先看下parent里面的代码吧

//parent.wxml

<tabs tabs="{{tabs}}" bindchangeTab="changeTab">
  <block>
    <view wx:if="{{tabs[0].isActive}}">111</view>
    <view wx:elif="{{tabs[1].isActive}}">222</view>
    <view wx:elif="{{tabs[2].isActive}}">333</view>
    <view wx:else="{{tabs[3].isActive}}">444</view>
  </block>
</tabs>

//parent.js

Page({
  /**
   * 页面的初始数据
   */
  data: {
    //传递给子组件
    tabs:[
      {
        index:0,
        label:'首页',
        isActive:true
      },
      {
        index:1,
        label:'关于',
        isActive:false
      },
      {
        index:2,
        label:'其他',
        isActive:false
      },
      {
        index:3,
        label:'我的',
        isActive:false
      },
    ]
  },
    //接受子组件传递的数据
  changeTab(e){
    let index = e.detail
    let {tabs} =this.data
    tabs.map((item,i)=>i===index ? item.isActive = true : item.isActive = false)
    this.setData({
      tabs
    })
  }
})

//parent.json

{
  "usingComponents": {
    "tabs":"../../components/parent/parent"
  }
}
           

接着 我们看下child的代码

//child.wxml
<view class="tabs">
  <view bindtap="changeTab" data-index="{{index}}" class="tabs_item {{item.isActive?'active':''}}" wx:for="{{tabs}}" wx:key="index">{{item.label}}</view>
</view>
<view>
  <slot></slot>
</view>

//child.js
Component({
  /**
   * 组件的属性列表
   */
   //接收父组件的数据
  properties: {
    tabs:{
      type:Array,
      value:[]
    }
  },

  /**
   * 组件的方法列表
   */
  methods: {
    //传递给父组件
    changeTab(e){
      let { index } = e.currentTarget.dataset
      this.triggerEvent("changeTab",index)
    }
  }
})
           

总结 ：

一：父组件传给子组件 

1.首先在父组件 .json 进行配置

2.父组件拿到配置标签 直接当标签进行使用

3.在子组件标签上自定义属性形式值为要传递的数据

4.子组件通过properties进行接收 

5.页面直接使用接收的属性

二：子组件传给父组件

1.子组件通过triggerEvent 自定义参数及传递的数据

2.子组件标签上通过自定义传递的事件 那后获取事件源得到参数

对你有帮助的同学请点点赞 关注关注吧 后面会不定期更新新的内容及技术