Vue中使用基于bootstrap-vue的BaseDropdown如何将下拉值同步给父组件

现有代码的核心问题 #

• 子组件直接修改传入的text prop：Vue遵循单向数据流规则，prop是父组件传入的只读值，子组件直接赋值text = option.name既不会触发父组件状态更新，还会触发Vue的运行时警告
• 子组件事件传值错误：原代码中$emit('input', $event.target.value)的取值逻辑有误，b-dropdown-item的点击事件回调不存在target.value属性，实际传出的是undefined
• 父组件未绑定事件接收逻辑：即使子组件正确触发了input事件，父组件没有对应的监听逻辑，也无法同步状态
• 类型定义不匹配：text prop标注为String类型，默认值却返回了对象{}；options prop标注为数组/对象，默认值也返回了对象，不符合类型约定

修改方案 #

1. 调整BaseDropdown子组件 #

移除子组件直接修改prop的逻辑，统一通过事件向父组件传递选中值；修正prop的类型和默认值；配置v-model映射规则，让组件支持Vue原生双向绑定语法。

修改后的完整代码：

<template>
  <div>
    <slot></slot>
    <b-dropdown :text="text">
      <b-dropdown-item 
        v-for="option in options" 
        :key="option.id" 
        @click="handleSelect(option)"
      >
        <span>{{ option.name }}</span>
      </b-dropdown-item>
    </b-dropdown>
  </div>
</template>

<script>
export default {
  name: "base-dropdown",
  // 配置v-model的映射规则，替代默认的value prop
  model: {
    prop: 'text',
    event: 'input'
  },
  props: {
    text: {
      type: String,
      default: ''
    },
    options: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  methods: {
    handleSelect(option) {
      // 根据业务需要传递对应的值，这里传递选中项的name
      this.$emit('input', option.name)
    }
  }
}
</script>

2. 调整父组件绑定逻辑 #

移除原来单独传text的写法，直接用v-model绑定phaseType，Vue会自动完成prop传入和事件监听的逻辑。

修改后的完整代码：

<template>
  <form class="auth-form">
    <BaseDropdown 
      v-model="phaseType"
      :options="phaseTypeOptions"
    >
      <h6 class="ml-4">PHASE TYPE</h6>
    </BaseDropdown>
  </form>
</template>

<script>
import BaseDropdown from "@/components/Base/BaseDropdown";
export default {
  name: "parent-component",
  data() {
    return {
      phaseType: "Single",
      phaseTypeOptions: [
        {
          id: 1,
          name: "Single",
        },
        {
          id: 2,
          name: "Three",
        },
      ]
    }
  },
  components: {
    BaseDropdown,
  }
}
</script>

可选调整 #

• 如果业务需要传递选中项的id而不是name，只需要修改子组件handleSelect方法里的emit内容：this.$emit('input', option.id)
• 原代码中给BaseDropdown添加的type="input"属性没有实际作用，组件内部未处理该配置，可以直接删除
• 如果不希望使用v-model语法，也可以在父组件中手动绑定，效果完全一致：:text="phaseType" @input="val => phaseType = val"

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