小程序变乱系统 —— 32 变乱系统 - 变乱分类以及克制变乱冒泡 ...

在微信小程序中，变乱分为 冒泡变乱 和 非冒泡变乱 ：
冒泡变乱：当一个组件的变乱被触发后，该变乱会向父节点传递；（如果父节点中也绑定了一个变乱，父节点变乱也会被触发，也就是说子组件的变乱和父组件的变乱都会被触发）；
非冒泡变乱：当一个组件的变乱被触发后，该变乱不会向父节点传递；（如果父节点绑定了变乱，父节点的变乱不会被触发，只有组件自己的变乱会触发）；
在微信小程序中，利用 bind 绑定的变乱，会触发变乱冒泡，如果想克制变乱冒泡，可以利用 catch 来绑定变乱；
下面利用微信开发者工具来演示一下，在基于上一节的内容下进行演示，在 pages/cate/cate.wxml 中添加以下代码：

1. <view class="catch" bind:tap="parentHandler">
2.   <button bind:tap="btnHandler">按钮</button>
3. </view>

复制代码

在 pages/cate/cate.scss 中添加以下样式代码：

1. .catch {
2.   display: flex;
3.   height: 300rpx;
4.   background-color: skyblue;
5.   align-items: center;
6. }

复制代码

在 pages/cate/cate.js 中添加以下函数：

1. Page({
2.   parentHandler(){
3.     console.log('父组件绑定的事件')
4.   },
6.   btnHandler(){
7.     console.log('子组件触发的事件')
8.   }
9. })

复制代码

编写完毕后，点击重新编译，点击页面的按钮，可以看到子组件和父组件绑定的变乱都触发了，如下：

如果想实现点击子组件按钮的时候，只触发子组件的变乱，父组件的变乱不触发，则必要克制子组件的变乱冒泡；如果想克制子组件的变乱冒泡，就必要更改一下绑定变乱的方式，我们必要把子组件绑定变乱的方式从 bind:tap 修改为 catch:tap，如下：

1. <view class="catch" bind:tap="parentHandler">
2.   <button catch:tap="btnHandler">按钮</button>
3. </view>

复制代码

重新运行，点击按钮，可以发现父组件的变乱没有触发，如下：

参考视频：尚硅谷微信小程序开发教程

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。