在事件中触发事件的场景示例记录

---

前言

为了和设计稿一致，不得不在列表的点击事件中再触发picker里的click事件来实现

---

这是uniapp中的列表组件，用插槽引入了picker要点击列表的时候就触发picker的点击事件。

html

<uni-list-item showArrow title="选择案件类型" :rightText="caseTypeText" clickable @click="openCaseTypePicker" >
          <template v-slot:footer>
            <picker
              ref="casePicker"
              mode="selector"
              :range="caseTypeList"
              @change="onCaseTypeChange"
              @click.stop="noop"
              :value="caseTypeIndex"
            >
              <text class="pickerFont">{{caseTypeText}}</text>
            </picker>
          </template>
        </uni-list-item>

js

<script setup>
import {ref} from 'vue'

const selectedValue = ref('yes');
const feeText = ref('1000-8000元');
const executionText = ref('1000-8000元');
const preservationText = ref('1000-8000元');

// 案件类型相关数据
const caseTypeList = ref(['民事案件', '刑事案件', '行政案件', '经济案件', '知识产权案件']);
const caseTypeIndex = ref(0);
const caseTypeText = ref('请选择');


// 法院地址相关数据
const caseAdress = ref('请选择');
const casePicker = ref(null);

// 案件类型点击事件
const openCaseTypePicker=()=>{
  //手动调用picker的click事件
  casePicker.value?.$el?.click()
}
const noop = () => {}

const onCaseTypeChange = (e) => {
  caseTypeIndex.value = e.detail.value
  caseTypeText.value = caseTypeList.value[caseTypeIndex.value]
}

</script>

关键核心代码：
casePicker.value?.$el?.click()
这句代码的作用是通过编程方式触发 casePicker 组件的点击事件。

• 底层逻辑

casePicker.value: 访问通过 ref 创建的 casePicker 引用的实际值
?. (可选链操作符): 安全地访问对象属性，避免因对象为 null 或 undefined 而报错
$el: Vue 实例的属性，指向组件根元素的 DOM 节点.click(): 调用 DOM 元素的 click 方法，模拟用户点击行为
使用场景

• 在这段代码中的具体应用场景是：

当用户点击 uni-list-item 组件时，实际需要触发的是其中嵌套的 picker 组件的点击事件
由于 picker 被包装在 uni-list-item 内部，直接点击列表项无法自动触发 picker 的展开
通过这种方式间接调用 picker 的 click 方法，实现点击列表项打开选择器的效果
这种方法常用于需要自定义触发原生组件行为的场景，特别是在组件被封装或需要通过其他交互元素触发时。