vue 仅点击父盒子才触发事件

Vue.js 中想要确保只有点击父元素才会触发事件，可以利用`v-on`指令结合`event.stopPropagation()`或者`.native`修饰符来阻止事件冒泡到其祖先元素。

1. **使用`event.stopPropagation()`**：
当你在绑定的事件处理器里添加 `event.stopPropagation()`，这会阻止事件继续向上传播到其父级元素。例如：

   <div @click="handleParentClick">
     <child-component @click.prevent="handleChildClick" />
   </div>

   methods: {
     handleParentClick(event) {
       // 父元素的处理逻辑
     },
     handleChildClick(event) {
       event.stopPropagation(); // 阻止事件传播到父级
       // 子元素的处理逻辑
     }
   }

2. **使用`.native`修饰符**：
如果你想保留原生的点击行为并阻止Vue的默认事件处理（比如阻止按钮的默认提交），可以在父元素上监听`@click.native`事件：

   <div @click.native="handleParentClick">
     <child-component @click="handleChildClick" />
   </div>

这样，点击子组件时不会触发父元素的事件。