uniapp 事件和阻止冒泡

1. <template> 
2.     <view> 
3.      
4.          
5.     <!--     <view class="font">{{name}}</view> 
6.      
7.         <view class="box" @tap="clickevent()">按钮</view> --> 
8.      
9.     <view class="box1" @tap.stop="box1event()"> 
10.         外面 
11.         <view class="box2" @tap.stop="box2event()">里面</view> 
12.     </view> 
13.      
14.      
15.      
16.     </view> 
17. </template> 
18.  
19. <script> 
20.     export default { 
21.         data() { 
22.             return { 
23.                 name:"哈哈哈" 
24.             } 
25.         }, 
26.         methods:{ 
27.             clickevent:function(){ 
28.                 this.name="嘻嘻嘻"; 
29.             }, 
30.             box1event:function(){ 
31.                 console.log("点击了外面"); 
32.             }, 
33.             box2event:function(){ 
34.                 console.log("点击了里面") 
35.             } 
36.         } 
37.     } 
38. </script> 
39.  
40. <style> 
41.     .box1{ 
42.         width: 100%; 
43.         height: 500upx; 
44.         background: #007AFF; 
45.         color: #FFFFFF; 
46.         font-size: 40upx; 
47.         display: flex; 
48.         justify-content: center; 
49.         align-items: center; 
50.     } 
51.     .box2{ 
52.         width: 300upx; 
53.         height: 300upx; 
54.         background: #09BB07; 
55.         color: #FFFFFF; 
56.         font-size: 40upx; 
57.         display: flex; 
58.         justify-content: center; 
59.         align-items: center; 
60.     } 
61. .box{ 
62.     background: #09BB07; 
63.     color: #FFFFFF; 
64.     width: 80%; 
65.     margin: auto; 
66.     height: 80upx; 
67.     font-size: 50upx; 
68.     border-radius:30upx; 
69.     border: 1upx solid #EEEEEE; 
70.     display: flex; 
71.     justify-content: center; 
72.     align-items: center; 
73. } 
74. .font{ 
75.     font-size: 50upx; 
76.     border: 1upx solid #CCCCCC; 
77.     padding: 20upx; 
78. } 
79. </style>