【bug】自定义组件事件使用bind默认还是会冒泡到页面
发布于 6 年前 作者 xiulan72 17400 次浏览 来自 问答

如果是 Bug：

自定义组件事件使用bind默认还是会冒泡到页面

* 如何复现？

组件b

<!-- 组件模板 -->
<view class="wrapper">
  <view>这里是组件的内部节点</view>
  <view>{{title}}</view>
  <view>A[0].b: {{A[0].b}}</view>
  <view bindtap='_changeVal'>点击更改A[0].b的值</view>
  <slot><!--外部文本会显示在这里--></slot>
</view>
Component({
properties: {
  title: {
    type: String,
    //value: '5555',
    observer(newVal, oldVal){
      console.log(newVal +'***'+oldVal)
    }
  },
  testA: Object
},
data: {
  A: [
    {
      b: 'bbb'
    }
  ],
  _a: 'aaa'
},
ready(){
  // var query = wx.createSelectorQuery()
  
},
methods: {
  _changeVal(e){
    this.replaceDataOnPath(['A',  0, 'b'], 'myPrivateData') // 这里将 data.A[0].B 设为 'myPrivateData'
    this.applyDataUpdates();
    this.setData({
      'A[0].b': 'hi, i\'m changed'
    })
    this.triggerEvent('myevent', {
      d: this.data
    },{
      //bubbles: true
    })
  }
}
})

页面a：

<!-- 引用组件的页面模版 -->
<view bindtap="maopao">
  <component-tag-name title="我是A传递的参数" id="BB" test-a="{{a}}" data-test-b="{{b}}" bindmyevent="myEvent">
    <!-- 这部分内容将被放置在组件 <slot> 的位置上 -->
    <view>这里是插入到组件slot中的内容</view>
  </component-tag-name>
</view>
// pages/A/A.js
Page({
 
  /**
   * 页面的初始数据
   */
  data: {
    a:{
      aa: 'aa',
      bb: 'bb'
    },
    b: {
      bb: 22,
      cc: true
    }
  },
 
  maopao(e){
    console.log('mao pao le.')
  },
  myEvent(e){
    console.log('myEvent: ');
    console.log(e.detail);
  }
})

演示如下：

@官网

3 回复

tap事件是全局冒泡的（bubbles: true, composed: true），想要阻止冒泡，请使用catchtap。

文档没有任何问题。tap本身就是冒泡的，需要开发者自行控制。

好的。

回到顶部