微信小程序---函数传参与子组件传递数据并影响父组件函数调用

函数传参

微信小程序无法通过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'，并传递参数

事件选项包括：

选项名	类型	是否必填	默认值	描述
bubbles	Boolean	否	false	事件是否冒泡
composed	Boolean	否	false	事件是否可以穿越组件边界，为false时，事件将只能在引用组件的节点树上触发，不进入其他任何组件内部
capturePhase	Boolean	否	false	事件是否拥有捕获阶段

代码效果

点击’子组件view‘之前

点击之后：

 

 接收到的e：