事件委托如何获取子元素

<div slot="rightTab" class="rightTab" @click="rightClick($event)">
   <span class="ydqxBtn one" :class="{ activeBtn: activeBtn == 1 }"
   >年</span>
   <span class="fenge">|</span>
   <span class="ydqxBtn two" :class="{ activeBtn: activeBtn == 2 }"
   >月</span>
   <span class="fenge">|</span>
   <spanclass="ydqxBtn three" :class="{ activeBtn: activeBtn == 3 }"
   >日</span>
 </div>

console.log(e.target.innerHTML)//目标的文本
      console.log(e.target.tagName)//目标的标签名
      console.log(e.target.nodeName)//目标的节点名
      console.log(e.target.id)//目标的id（标签不设置为空）
      console.log(e.target.className)//目标的类名（标签不设置为空）)
      console.log(e.target.childNode)//目标的子节点
      console.log(e.target.parentNode)//目标的父节点

事件委托所有子元素都会触发点击事件，所以给需要监听的元素设置一个相同的类名或者相同的标签，先判断点击的元素是否为需要触发事件的标签。然后再进行相应的判断

methods: {
          
   
    rightClick(e) {
          
   
      let className = e.target.className;
      if (className.indexOf("ydqxBtn") > -1) {
          
   
        console.log(className);
        let flag =
          className.indexOf("one") > -1
            ? 1
            : className.indexOf("two") > -1
            ? 2
            : 3;
        this.activeBtn = flag;
      }
    },
  },