如何从组件内部判断点击的是哪个同类型settings组件

嘿，这个问题问得好！当你有一堆同属settings组件组但功能各有差异的实例时，要判断点击的是哪一个，核心就是利用每个组件自带的type属性来做区分。下面给你列几个不同技术栈下的实现方案：

原生JavaScript场景 #

如果是纯原生JS或者自定义元素的情况，有两种简单的实现方式：

方式1：给所有settings元素绑定点击事件，读取目标元素的type属性 #

直接通过event.target获取被点击的元素，然后读取它的type属性即可：

// 获取页面上所有settings元素
const allSettings = document.querySelectorAll('settings');

allSettings.forEach(el => {
  el.addEventListener('click', function(e) {
    // 拿到当前点击组件的type值
    const currentType = e.target.getAttribute('type');
    console.log(`被点击的是【${currentType}】类型的settings组件`);
    
    // 这里可以根据type值执行不同的逻辑
    switch(currentType) {
      case 'first':
        // 处理first类型的设置逻辑
        alert('你点击了第一个设置组件');
        break;
      case 'second':
        // 处理second类型的设置逻辑
        alert('你点击了第二个设置组件');
        break;
      // 其他类型依次类推
    }
  });
});

方式2：自定义元素内部绑定点击事件（如果settings是自定义组件） #

如果你的<settings>是自定义HTML元素，可以在组件类内部直接读取自身的type属性：

class SettingsComponent extends HTMLElement {
  constructor() {
    super();
    // 在组件内部绑定点击事件
    this.addEventListener('click', () => {
      const currentType = this.getAttribute('type');
      console.log(`当前点击的是【${currentType}】组件`);
      // 在这里编写对应type的处理逻辑
    });
  }
}

// 注册自定义元素
customElements.define('settings', SettingsComponent);

Vue.js场景（2/3版本通用） #

在Vue中，我们可以通过props接收每个组件的type属性，然后在点击事件中直接使用：

选项式API写法 #

<template>
  <div class="settings-item" @click="handleClick">
    <!-- 插槽展示组件内容 -->
    <slot></slot>
  </div>
</template>

<script>
export default {
  props: {
    type: {
      type: String,
      required: true // 确保每个组件都传入type
    }
  },
  methods: {
    handleClick() {
      console.log(`被点击的是【${this.type}】类型的settings组件`);
      // 根据type执行对应逻辑
      if (this.type === 'first') {
        // 第一个组件的处理逻辑
      } else if (this.type === 'second') {
        // 第二个组件的处理逻辑
      }
    }
  }
}
</script>

组合式API写法（Vue3） #

<template>
  <div class="settings-item" @click="handleClick">
    <slot></slot>
  </div>
</template>

<script setup>
import { defineProps } from 'vue';

// 定义props接收type
const props = defineProps({
  type: {
    type: String,
    required: true
  }
});

const handleClick = () => {
  console.log(`被点击的是【${props.type}】类型的settings组件`);
  // 这里编写对应type的业务逻辑
};
</script>

React场景 #

React中同样通过props接收type，然后在点击回调中使用：

function Settings({ type, children }) {
  const handleClick = () => {
    console.log(`被点击的是【${type}】类型的settings组件`);
    // 根据type值执行不同的处理逻辑
    switch(type) {
      case 'first':
        // 处理first组件逻辑
        break;
      case 'second':
        // 处理second组件逻辑
        break;
      default:
        // 默认逻辑
    }
  };

  return (
    <div onClick={handleClick} className="settings-item">
      {children}
    </div>
  );
}

// 使用组件时传入type属性
function App() {
  return (
    <div>
      <Settings type="first">1</Settings>
      <Settings type="second">2</Settings>
      <Settings type="third">3</Settings>
    </div>
  );
}

核心思路总结 #

不管用哪种技术栈，核心逻辑都是让每个settings组件实例持有自己的type标识，在点击事件触发时读取这个标识，就能轻松区分出被点击的是哪一个组件，进而执行对应的差异化逻辑。

内容的提问来源于stack exchange，提问作者Kalreg