学习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.子组件标签上通过自定义传递的事件 那后获取事件源得到参数
对你有帮助的同学请点点赞 关注关注吧 后面会不定期更新新的内容及技术