将单击按钮的值作为道具传递答案

【问题标题】：Passing Value from Clicked Button as a Prop将单击按钮的值作为道具传递
【发布时间】：2021-11-18 17:13:59
【问题描述】：

我对如何将按钮内定义的值传递给子组件感到有些困惑。基本上，显示百分比的单击按钮的值应该是道具值。这个道具值应该根据我点击的值而改变。我应该使用 v 模型吗？如果是这样，怎么做？这是我到目前为止所拥有的......

ButtonGroup.vue

    <button class="button" v-on:click="percentageValue(0.05)">5%</button>
    <button class="button" v-on:click="percentageValue(.10)">10%</button>
    <button class="button" v-on:click="percentageValue(.15)">15%</button>
    <button class="button" v-on:click="percentageValue(.25)">25%</button>
    <button class="button" v-on:click="percentageValue(.50)">50%</button>

<script>
  export default {
    name: 'ButtonGroup',
    data(){
      return{
        percentage: null
      }
    },
     methods:{
      percentageValue(value){
        return this.percentage = value;
      }
    },
    props:['percentage']
  }
</script>

计算器.vue

<ButtonGroup :percentage="percentage"/>

【问题讨论】：

标签： javascript vue.js vue-component vuejs3

【解决方案1】：

试试这样：

Vue.component('button-group', {
  template: `
  <div class="">
    <ul>
      <li v-for="(percent, i) in percentages" :key="i">
        <button class="button" 
                @click="setPercent(percent)"
                :class="selPercent === percent && 'selected'">
          {{ percent }}%
        </button>
      </li>
    </ul>
  </div>
  `,
  props:['percentage'],
  data(){
    return{
      selPercent:  this.percentage,
      percentages: [5, 10, 15, 25, 50 ]
    }
  },
  methods:{
    setPercent(value){
      this.selPercent = value;
      this.$emit('percent-seted', value);
    }
  },
})

new Vue({
  el: '#demo',
  data() {
    return {
      percent: 5
    }
  },
  methods: {
    percentSeted(val) {
      this.percent = val
    }
  }
})

Vue.config.productionTip = false
Vue.config.devtools = false

ul {
  list-style: none;
  display: flex;
}
.selected {
  background: violet;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <h3>{{ percent }}%</h3>
  <button-group :percetntage="percent" @percent-seted="percentSeted" />
</div>

【讨论】：