javascript - 如何从组件内部找出哪些组件被单击

Question

考虑我有一个类型的多个组件，如下所示:

<settings type="first">1</settings>
<settings type="second">2</settings>
<settings type="third">3</settings>
<settings type="fourth">4</settings>
<settings type="fifth">5</settings>

每个组件都是称为设置的“组”的一部分，但每个组件的工作也略有不同 - 共同点是它是设置元素。现在，因为每个方法执行不同的工作，所以我在“设置”组件定义中具有多个方法，但每个方法的行为都不同，具体取决于单击的组件:

Vue.component('settings',
    {
        template:  '<div class="setting" @click="selectIt">',
        props: ['type'],
        methods: {
            selectIt() {
               switch ( this.type ) {
                  case 'first':
                  console.log("first")
                  break;
                  case 'second':
                  console.log("second")
                  break;
               }
       }
   }
})

问题来了:

• 这是解决此类问题的好方法吗？也许每个设置应该是不同类型的组件？

• 如何 - 以其他方式 - 找出从组件内部单击了哪个设置？

Answer 1

每个组件都有自己的 id(如果您需要的话):

Vue.component('my-component', {
  template: '#my-component',
  data() {
    return {
      selected: false
    }
  },
  methods: {
    selectMe() {
      this.selected = !this.selected
      console.log(this._uid)
    }
  }
})

new Vue({
  el: '#app',
})

.card {
  background-color: #F5F5F5;
  border-radius: 8px;
  margin: 5px;
  padding: 5px 10px;
}
.selected {
  background-color: #B1B1B1;
}

<script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>

<div id="app">
  <my-component>1</my-component>
  <my-component>2</my-component>
  <my-component>3</my-component>
  <my-component>4</my-component>
  <my-component>5</my-component>
</div>

<template id="my-component">
  <div class="card" :class="{'selected': selected }" @click="selectMe">
    <slot />
  </div>
</template>