如何将道具传递给 Vuejs 中的输入值

Question

我有一个父组件作为购物车。这里我定义了数量，我想将这个数量传递给子组件的输入值，即 Counter。所以这是我传递它的方式这是我的父组件 Cart:

<Counter quantity="item.quantity"/>

这是我的子组件，计数器：

<template>
    <div id="counter">
        <button class="minus" @click="countDown"><i :class="quantity == 0 ? 'disabled' : ''" class="fas fa-minus"></i></button>
        <div class="count-number"><input class="counter-content" type="number" v-model="quantity"></div>
        <button class="plus" @click="countUp"><i class="fas fa-plus"></i></button>
    </div>
</template>
<script>
    export default {
        props: {
            quantity: Number
        },
        methods: {
            countUp() {
                this.quantity++;
            },
            countDown() {
                if(this.quantity > 0) {
                    this.quantity--;
                }
            },
        }
    }
</script>

我是 Vue 的新手，所以我传递道具时可能做错了什么。那么你能帮我解决这个问题吗？

Answer 1

尝试（使用 : 冒号）

<Counter :quantity="item.quantity"/>

之前你只是传递字符串“item.quanity”

我看到你在直接修改你的道具：

            countUp() {
                this.quantity++;
            },
            countDown() {
                if(this.quantity > 0) {
                    this.quantity--;
                }
            },

这不是您在 Vue 中的做法。您需要使用双向绑定。

countUp() {
  this.$emit('input', this.quantity+1)
}

countDown() {
  this.$emit('input', this.quantity-1)
}

并在您的父组件中：

<Counter :quantity="item.quantity" @input="(payload) => {item.quantity = payload}"/>

顺便说一下，Vue 样式指南建议使用多词组件名称：https://vuejs.org/v2/style-guide/#Multi-word-component-names-essential（Cart = bad，MyCart = good）

Answer 2

我们无法更改从 props 获得的值，所以我创建了一个变量并在安装时将 props 放在那里

试一试

<Counter :quantity="item.quantity"/>

和

<template>
  <div id="counter">
    <button class="minus" @click="countDown"><i :class="sum == 0 ? 'disabled' : ''" class="fas fa-minus"></i></button>
    <div class="count-number"><input class="counter-content" type="number" v-model="sum"></div>
    <button class="plus" @click="countUp"><i class="fas fa-plus"></i></button>
  </div>
</template>

<script>
export default {
  props: {
    quantity: Number
  },
  data: () => ({
    sum: 0
  }),
  mounted() {
    this.sum = this.quantity;
  },
  methods: {
    countUp() {
      this.sum++;
    },
    countDown() {
      if(this.sum > 0) {
        this.sum--;
      }
    },
  }
}
</script>

如何将道具传递给 Vuejs 中的输入值

How to pass props to input value in Vuejs

vue.js

vuejs2

vue-props

我们无法更改从 props 获得的值，所以我创建了一个变量并在安装时将 props 放在那里