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

Posted 2023-02-23

【中文标题】将默认数据传递给 Vue 表单组件

【英文标题】：Passing default data to Vue form component

【发布时间】：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 所说，我们可以使用计算属性:)

【参考方案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) );