Vue

by Steve

HTML

<div id="app">
  <div class="parent" @click.self="parent"> <!-- .self modifier -->
    <span class="child" @click="child1">Child1</span>
    <span class="child" @click="child2">Child2</span>
    <span class="child" @click="child3">Child3</span>
  </div>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

.parent {
  width: 200px;
  height: 200px;
  border: 2px solid blue;
  display: flex;
  justify-content: space-around;
  align-items: center;
  cursor: pointer;
}

.child {
  padding: 8px;
  border: 1px solid red;
}

Vue

new Vue({
  el: "#app",
 	methods: {
  	parent() { alert('you clicked the parent') },4
    child1() { alert('you clicked the child1') },
    child2() { alert('you clicked the child2') },
    child3() { alert('you clicked the child3') },
  }
})