作为一个人，要是不经历过人世上的悲欢离合，不跟生活打过交手仗，就不可能懂得人生的意义。——杨朔
代码如下
<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即可阻止冒泡
<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>
