Question

我正在使用git hub的this软件包来减去vuejs的输入以及输入，在v2文件夹示例中，有一个名为plusminusfield.vue的示例文件，这就是我使用它的目的：

 export default {
    props: {



        value: {
            default: 0,
            type: Number
        },
       base_capacity: {
            type: Number,
            required: true
        },
        min: {
             default: here I want to use the sent variable which is defined above and that is base_capacity 
 if I send a hard code like 5 it works well but I want to make it dynamic
             type:Number
        },
        max: {
            default: 22,
            type: Number
        },
    },
    data(){
        return {

            newValue: this.base_capacity,
        }
    },

这是减号加上输入数量并控制最大值和最小值的方法：

methods:{
        getNotificationClass (notification) {
            return `alert alert-${notification.type}`
        },
        mpminus: function () {
            if ((this.newValue) > this.min) {
                this.newValue = this.newValue - 1
                this.$emit('input', this.newValue)
            }

        },
        mpplus: function () {
            if (this.max === undefined || (this.newValue < this.max)) {
                this.newValue = this.newValue + 1
                this.$emit('input', this.newValue)
            }
        },

    },
 watch: {
        value: {
            handler: function (newVal, oldVal) {
                this.newValue = newVal
            }
        }
    },

因此，如果我在其他任何地方定义它，并在道具中使用它，则会得到突变错误，父组件将其更改，并且我的应用程序将无法运行，如果我使用如下所示的计算，我将在它们前面注释该错误：

computed: {
           min() {
             return this.min ? this.min : this.base_capacity //Maximum call stack size exceeded
         }
        min : this.base_capacity // the error is base_capacity not defined
    },

所以我有什么办法可以通过

传递输入的最小值

Answer 1

使用工厂函数而不是直接使用它并返回值。

此外，HTML属性区分大小写。

示例：如果将属性设置为：base-capacity，则Vue会将其自动转换为baseCapacity的驼峰形式，以从脚本中访问它。

这是官方的docs

Vue.component('plus-minus', {
  template: '#vplusminus',
  props: {
    value: {
      default: 0,
      type: Number
    },
    baseCapacity: {
      default: 0,
      type: Number
    },
    min: {
      default: function () {
        return this.baseCapacity 
      },
      type: Number
    },
    max: {
      default: undefined,
      type: Number
    }
  },
  data() {
    return {
      newValue: 0
    }
  },
  methods: {
    getNotificationClass(notification) {
      return `alert alert-${notification.type}`
    },
    mpplus: function() {
      if (this.max === undefined || (this.newValue < this.max)) {
        this.newValue = this.newValue + 1
        this.$emit('input', this.newValue)
      }
    },
    mpminus: function() {
      console.log(this.min); // Here it is coming as 12
      if ((this.newValue) > this.min) {
        this.newValue = this.newValue - 1
        this.$emit('input', this.newValue)
      }
    }
  },
  watch: {
    value: {
      handler: function(newVal, oldVal) {
        this.newValue = newVal
      }
    }
  },
  created: function() {
    this.newValue = this.value
  }
});

new Vue({
  el: '#app'
});

.minusplusnumber {
  border: 1px solid silver;
  border-radius: 5px;
  background-color: #FFF;
  margin: 0 5px 0 5px;
  display: inline-block;
  user-select: none;
}

.minusplusnumber div {
  display: inline-block;
}

.minusplusnumber #field_container input {
  width: 50px;
  text-align: center;
  font-size: 15px;
  padding: 3px;
  border: none;
}

.minusplusnumber .mpbtn {
  padding: 3px 10px 3px 10px;
  cursor: pointer;
  border-radius: 5px;
}

.minusplusnumber .mpbtn:hover {
  background-color: #DDD;
}

.minusplusnumber .mpbtn:active {
  background-color: #c5c5c5;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <plus-minus :base-capacity="12" :value="16"></plus-minus>
  <plus-minus></plus-minus>
</div>

<script type="template/text" id="vplusminus">
  <div class="minusplusnumber">
    <div class="mpbtn minus" v-on:click="mpminus()">
      -
    </div>
    <div id="field_container">
      <input type="number" v-model="newValue" disabled />
    </div>
    <div class="mpbtn plus" v-on:click="mpplus()">
      +
    </div>
  </div>
</script>

Answer 2

虽然接受的答案适用于 Vue 2.x，但在 Vue 3.x 中，默认工厂函数不再可以访问 .btn{ display: block; margin: 2em auto; }。相反，您可以将组件的 props 作为参数传递给工厂函数：

this

请参阅迁移指南：https://v3.vuejs.org/guide/migration/props-default-this.html

Answer 3

您不应使用其他prop作为默认值。即使它们可用，也不能保证评估道具的顺序。

一种更好的方法是使用一个计算属性，该属性同时考虑到两个道具，并在组件内部使用它。

computed: {
   minComputed () {
     return this.min ? this.min : this.base_capacity
   }
}

此外，从default的定义中删除min的值

如何在另一个prop内部使用prop作为vuejs中的默认值

3 个答案: