将默认数据传递给 Vue 表单组件答案

【问题标题】：Passing default data to Vue form component将默认数据传递给 Vue 表单组件
【发布时间】：2018-02-20 20:53:13
【问题描述】：

这是一个简单的 Vue 2.0 表单组件。它由一个数字输入和一个按钮组成，例如：

请注意，输入的值使用v-model 绑定到组件的data。 buttonText 作为道具传入。

将默认值传递给表单的最佳方法是什么，以便它最初以 10 以外的值呈现？

使用props 似乎不是正确的方法，因为那样v-model 将不再正常工作。
但是，据我从 Vue 文档中得知，data 不能以 props 的方式传递。

<template>
    <form v-on:submit.prevent="onSubmit">
      <input v-model="amount" type="number" min="1" max="20"></input>
      <button type="submit">{{ buttonText }}</button>
    </form>
</template>

<script>
  export default {
    props: [ 'buttonText' ],
    data: function() {
      return {
        amount: 10
      }
    },
    methods: {
      onSubmit: function() {
        this.$emit("submit", parseInt(this.amount) );
      }
    }
  }
</script>

【问题讨论】：

你可以使用道具。它不会给任何问题。
@SureshVelusamy 不，你不能。 Vue 会发出警告，提示您不应编辑道具，因为如果重新渲染父组件，它们将被覆盖。
是的。正如#vuejs 所说，我们可以使用计算属性:)

标签： javascript vue.js vuejs2 vue-component

【解决方案1】：

您可以传入一个道具（比如initialAmount）并在数据函数中初始化amount 值时引用它：

export default {
  props: {
    buttonText: { type: String },
    initialAmount: { type: Number, default: 10 },
  },
  data: function() {
    return {
      amount: this.initialAmount
    }
  },
  methods: {
    onSubmit: function() {
      this.$emit("submit", parseInt(this.amount) );
    }
  }
}

【讨论】：