Javascript 如何找出哪些组件已从组件内部单击

假设我有一种类型的多个组件，如下所示：

<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>

每个组件都是名为settings的组的一部分，但每个组件的工作稍有不同，常见的是它是settingelement。 现在，由于每个组件的工作不同，我在设置组件定义中有多个方法，但每个方法的行为不同，具体取决于单击的组件：

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;
               }
       }
   }
})

问题来了：

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

另一方面，如何找到从组件内部单击的设置

---

下面的解决方案可能会满足您的要求

我的意见是：

添加一个prop=handlers，然后为每个类型定义默认处理程序

如果父组件想要执行某些特殊逻辑，请将其自己的处理程序传递给设置组件。对于您的情况，似乎父组件知道需要做什么，但子组件不知道。因此，家长将一个处理程序传递给孩子会更好——孩子不在乎它在哪里，只需要做自己的工作

Vue.config.productionTip=false Vue.组件“设置”{ 模板：“{type}}”， 道具：{ “类型”：{ 类型：字符串， 默认值：'first' }, “处理程序”：{ 类型：对象， 默认值：=>{return{}} } }, 资料{ 返回{ defaultHandlers:{//在此处定义每种类型的处理程序 “第一个”：=>{ console.log'first' }, “第二个”：=>{ 控制台。记录“秒” }, “第三个”：=>{ 控制台。记录“第三” } }, 合并句柄：{} } }, 方法：{ 选择它{ 如果这是。请输入this.mergedHandlers{ this.mergedHandler[this.type] }否则{//如果未找到处理程序，请执行某些操作 控制台。警告“未找到处理程序” } } }, 安装：功能{ //将自定义选项与默认处理程序合并 Object.assignthis.mergedHandlers，this.defaultHandlers，this.handlers } } app=新Vue{ el:应用程序， 数据：{ 信息：穿靴子的猫 }, 方法：{ customHandlerForSecond:函数{//将自定义处理程序传递给子组件 console.log'parent customized second for'+this.message } } }

---

如果您需要，每个组件都有自己的id：

Vue.组件“我的组件”{ 模板：“我的组件”， 资料{ 返回{ 所选：false } }, 方法：{ 选择我{ this.selected=！this.selected 控制台。记录此操作。\u uid } } } 新Vue{ el:“应用程序”， } .卡片{ 背景色：F5； 边界半径：8px； 保证金：5px； 填充物：5px10px； } .选定{ 背景色：B1B1； } 1. 2. 3. 4. 5.

---

将道具传递给设置组件并不符合您的需要？它可以工作，但在许多设置组件中会变得非常混乱，我想知道是否有更好的方法。在html上，您可以使用v-for并将组件的索引作为道具传递，而不是html，在逻辑方面，我更喜欢使用类似于case:1的方法，我希望在组件中有一些内部变量来说明它是哪个组件，而不是case'first'。还有另一种更清晰的方法。只需创建一个数据{}的函数对象，并将其分配给click事件，它只会在该组件被单击+1后被触发。这是一个很好的方法，但是_uid是整数数据，如果op想要其他格式，他将不得不采用相同的切换方案