将点击按钮的值作为道具传递

Question

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

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>

Calculator.vue

<ButtonGroup :percentage="percentage"/>

Answer 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>

将点击按钮的值作为道具传递

Passing Value from Clicked Button as a Prop

javascript

vue.js

vue-component

vuejs3