微信小程序之bind和catch

这两个呢，都是绑定事件用的，具体使用有些小区别。

官方文档：

• 事件冒泡处理不同
  • bind：绑定的事件会向上冒泡，即触发当前组件的事件后，还会继续触发父组件的相同事件。例如，有一个子视图绑定了bindtap点击事件，当点击子视图时，不仅子视图的点击事件处理函数会执行，其父视图中绑定的bindtap事件处理函数也会执行，前提是父视图也绑定了该事件。
  • catch：绑定的事件不会向上冒泡，触发当前组件的事件后，事件传播会停止。比如，在一个父子视图结构中，子视图使用catchtap绑定点击事件，当点击子视图时，只有子视图的点击事件处理函数会执行，父视图中绑定的bindtap或catchtap事件处理函数都不会执行。

有点类似于消息传递。

具体我们来测试感受一下：

先做三个按钮(wxml)：

<view class="content" bind:tap="parentTap">
    <text bind:tap="childTap">bind测试</text>
  </view>
  <view class="content" bind:tap="parentTap">
    <text catch:tap="childTap">catch测试</text>
  </view>
  <view class="content" bind:tap="parentTap">
    <text>只有父窗口有响应</text>
  </view>

 然后在事件处理函数中打印一下log：

parentTap() {
    console.log("父组件点击");
  },
  childTap() {
    console.log("子组件点击");
  }

涉及的css布局：

.content{
  width: 300rpx;
  height: 80rpx;
  line-height: 80rpx;
  font-size: 28rpx;
  text-align: center;
  border: 1rpx solid #333;
  border-radius: 10rpx;
}

最后是这样的：

然后我们分别点击，看效果：

点击bind测试按钮，终端会打印2次：

说明什么，儿子有儿子的处理方法，老子有老子的处理方法。

点击catch测试按钮，终端会打印1次： 

说明什么：这点小事，我来处理就行了，不用告诉老子了。

点击最后一个按钮，终端打印：

 

说明什么，儿子惹的祸，他不管，老子还得管上。

小知识，知道就好，反正我到现在还没用到。