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

Question

我正在使用来自 git hub 的这个包作为 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
            }
        }
    },

因此，如果我在其他任何地方定义它并在 props 中使用它，我会得到突变错误，父组件更改它并且我的应用程序不会运行，如果我使用如下计算，我会在它们前面评论错误：

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

虽然接受的答案适用于 Vue 2.x，但在 Vue 3.x 中，默认工厂函数不再能够访问this. 相反，您可以将组件的 props 作为参数传递给工厂函数：

props: {
  ...
  baseCapacity: {
    default: 0,
    type: Number
  },
  min: {
    default: (props) => props.baseCapacity,
    type: Number
  },
  ...
},

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

Answer 2

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

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

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

这是官方文档

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>