vue中组件事件冒泡

<template>
 <div class="appBox">
    &emsp;&emsp;<div class="outeer" @click.stop="outer" style="width: 100px;height:40px;background: red;">
    &emsp;&emsp;&emsp;&emsp;<div class="middle" @click.stop="middle" style="width: 80px;height: 40px;background: blue;">
    &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;<button @click.stop="inner">点击我(^_^)</button>
    &emsp;&emsp;&emsp;&emsp;</div>
    &emsp;&emsp;</div>
  </div>
</template>
 methods:{
    outer(){
      console.log(333333)
    },
    middle(){
      console.log(222222)
    },
    inner(){
      console.log(111111)
    },
}
阻止事件冒泡用   .stop 点击子节点不会捕获到父节点的事件。
复制代码