不使用事件总线，如何在Vue项目中实时获取下拉列表的选中值

解决方案 #

核心思路是遵循单向数据流规范，将下拉选中值通过参数传递给业务逻辑层，完全避免跨层操作DOM获取值。

1. 改造下拉组件dropdownlist.vue，支持值绑定与变化事件抛出 #

<template>
    <div>
        <select v-model="selectedMode" @change="handleOnChange">
            <option value="1" selected>one</option>
            <option value="2">two</option>
            <option value="3">three</option>
        </select>
    </div>
</template>
<script>
export default {
    name: 'DropDownList',
    data() {
        return {
            selectedMode: '1'
        }
    },
    // 支持父组件通过v-model双向绑定选中值
    model: {
        prop: 'value',
        event: 'change'
    },
    props: {
        value: String
    },
    watch: {
        value(val) {
            this.selectedMode = val
        }
    },
    methods: {
        handleOnChange() {
            this.$emit('change', this.selectedMode)
        }
    }
}
</script>

2. 父组件存储选中值，调用业务方法时作为参数传入 #

在使用下拉组件的父组件中绑定选中值，需要调用firestore.dao.js的查询方法时，直接将存储的最新值作为参数传递即可：

<template>
    <div>
        <drop-down-list v-model="currentMode" />
        <button @click="getPostList">触发查询</button>
    </div>
</template>
<script>
import DropDownList from './dropdownlist.vue'
import { selectPosts } from './firestore.dao.js'
export default {
    components: { DropDownList },
    data() {
        return {
            currentMode: '1'
        }
    },
    methods: {
        async getPostList() {
            // 直接将最新选中值传入业务方法
            const res = await selectPosts(this.currentMode)
            // 后续业务处理逻辑
        }
    }
}
</script>

3. 调整业务层方法selectPosts，接收参数使用 #

删除firestore.dao.js中原有的DOM查询逻辑，改为接收入参使用：

export async function selectPosts(mode) {
    console.log('abcd: ' + mode)
    // 原有查询逻辑直接使用传入的mode参数即可
}

原有写法问题说明 #

之前直接在业务层通过document.getElementById拿值存在多个隐患：如果页面渲染了多个ID为jsmode的下拉实例，只会返回第一个渲染实例的默认值；如果调用业务方法时组件DOM未完成更新，也会拿到旧值。改用参数传递的方式完全规避了DOM操作依赖，也符合给出的开发建议。

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