©2020-2024 ioDraw All rights reserved,
Privacy Policy
函数传参
微信小程序无法通过JS函数常见方式在括号内传参：
<view bindtap='courseChosen("参数")'></view>
会报错：没有此函数
在小程序中可以通过data-num="{{index}}"自定义参数名称传递参数：
<view bindtap='courseChosen("参数")' data-num="参数"></view>
在对应的JS文件中写courseChosen函数输出e：
我们可以看到此时e中出来了自定义的参数num，它的value是输入参数
因此我们可以实现在微信小程序中传递参数，例如：
<view wx:for='{{$state.courseHave}}' wx:for-index="index" wx:for-item="item"
wx:for-key="index" class="aCourse" > <view bindtap='courseChosen' data-num="{
{index}}" data-item="{{item}}"> {{$state.courseHave[index]}} </view> </view>
输出如下：
子组件传递数据并影响父组件函数调用
1. 在page中调用组件：
//page的json文件中 "usingComponents": {
"try_comp":"../../components/try_comp/try_comp" } //page的wxml中 <try_comp
class=""
style='color:blue;with:200rpx;line-height:200rpx;text-align:center;font-size:25px'
bind:xxx="getChildrenChange"> {{fatherMessage}} </try_comp> //page的js文件中 data:
{ fatherMessage:'我是页面' }, getChildrenChange:function(e){ this.setData({
fatherMessage:'检测到子组件发生变化并传递数据：' }) console.log(e); },
我们在页面中使用bind:xxx="getChildrenChange"绑定了事件xxx，当事件xxx被触发时，调用函数getChildrenChange，更改fatherMessage的内容并输出传入的e
2. 在组件中
//js文件 data: { messageToFather:'子组件传递给父级的数据' }, methods: {
changeFather:function(){ let {messageToFather}=this.data;
this.triggerEvent("xxx", { value: messageToFather }) }, //wxml文件 <slot></slot>
<view bindtap='changeFather'> 子组件view </view>
我们在组件中绑定点击事件，当我们点击《子组件view》时，调用函数changeFather，此时
在组件的js文件中的changeFather函数中使用
this.triggerEvent('myevent', myEventDetail, myEventOption)
this.triggerEvent( 'xxx', { value:messageToFather} )
，指定事件名（在page页面中bind:xxx中的xxx，xxx为自定义事件名）、detail对象和事件选项
以此来触发page页面在调用组件时绑定的函数'xxx'，并传递参数
事件选项包括：
选项名类型是否必填默认值描述
bubblesBoolean否false事件是否冒泡
composedBoolean否false事件是否可以穿越组件边界，为false时，事件将只能在引用组件的节点树上触发，不进入其他任何组件内部
capturePhaseBoolean否false事件是否拥有捕获阶段
代码效果
点击’子组件view‘之前
点击之后：
接收到的e：