作为一个人,要是不经历过人世上的悲欢离合,不跟生活打过交手仗,就不可能懂得人生的意义。——杨朔
代码如下
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35
| <template> <view> <view class="navigators"> <view class="parent-navigator" @tap="parentEvent()"> 上层,打印语句 <navigator class="child-navigator" url="/pages/test/test">内层,回到/pages/test/test页面</navigator> </view> </view> </view> </template>
<script> export default { data() { return {}; }, methods: { parentEvent() { console.log('parentEvent'); } } }; </script> <style scoped> .parent-navigator { width: 400rpx; height: 400rpx; background-color: #8e8e8e; } .child-navigator { width: 200rpx; height: 200rpx; background-color: #e8e8e8; } </style>
|
这里我们点击内层的navigator
会触发外层的@tap
事件
我们可以加一个catchtap
即可阻止冒泡
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35
| <template> <view> <view class="navigators"> <view class="parent-navigator" @tap="parentEvent()"> 上层,打印语句 <navigator class="child-navigator" catchtap url="/pages/test/test">内层,回到/pages/test/test页面</navigator> </view> </view> </view> </template>
<script> export default { data() { return {}; }, methods: { parentEvent() { console.log('parentEvent'); } } }; </script> <style scoped> .parent-navigator { width: 400rpx; height: 400rpx; background-color: #8e8e8e; } .child-navigator { width: 200rpx; height: 200rpx; background-color: #e8e8e8; } </style>
|