Vue中将点击按钮的数值作为Prop传递给子组件，是否需使用v-model？

问题解答 #

你这个场景非常适合用v-model实现，它本质是父子组件双向绑定的语法糖，可以简化你手动绑定属性+监听事件的代码。
首先你现有代码存在2个核心问题：

• 子组件ButtonGroup内同时声明了同名的percentage prop和data属性，变量冲突无法正常运行
• 直接在子组件内修改prop不符合Vue单向数据流规范，会触发运行时警告，且父组件也收不到更新后的值

具体实现步骤（适配你用的Vue2选项式语法）

1. 修改子组件ButtonGroup.vue代码

<template>
  <div>
    <button class="button" @click="selectPercentage(0.05)">5%</button>
    <button class="button" @click="selectPercentage(0.10)">10%</button>
    <button class="button" @click="selectPercentage(0.15)">15%</button>
    <button class="button" @click="selectPercentage(0.25)">25%</button>
    <button class="button" @click="selectPercentage(0.50)">50%</button>
  </div>
</template>

<script>
export default {
  name: 'ButtonGroup',
  // 自定义v-model的绑定规则，语义更明确
  model: {
    prop: 'percentage',
    event: 'update'
  },
  props: ['percentage'],
  methods: {
    selectPercentage(value) {
      // 子组件不直接修改值，抛出事件通知父组件更新
      this.$emit('update', value)
    }
  }
}
</script>

2. 修改父组件Calculator.vue代码

<template>
  <div>
    <!-- 直接用v-model绑定父组件的状态变量即可 -->
    <ButtonGroup v-model="selectedPercentage" />
    <!-- 测试用：可以实时看到选中的比例 -->
    <p>当前选中比例：{{ selectedPercentage }}</p>
  </div>
</template>

<script>
import ButtonGroup from './ButtonGroup.vue'
export default {
  components: { ButtonGroup },
  data() {
    return {
      // 父组件维护选中状态，初始值可自定义
      selectedPercentage: null
    }
  }
}
</script>

如果不想用v-model，也可以手动写完整的绑定逻辑，效果完全一致：

<ButtonGroup :percentage="selectedPercentage" @update="selectedPercentage = $event" />

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