Vue 양식 구성 요소에 기본 데이터 전달

Vue 양식 구성 요소에 기본 데이터 전달

여기에 간단한 Vue 2.0 폼 구성 요소가 있다.숫자 입력과 버튼(예:

입력 값이 구성 요소의 값과 연결됨을 참고하십시오.data사용.v-model.buttonText소품으로 전해진다.

초기에는 10이 아닌 값으로 렌더링할 수 있도록 기본값을 폼에 전달하는 가장 좋은 방법이 무엇인가?

• 사용.props그때가 되어서 하는 방법이 아닌 것 같다.v-model더 이상 제대로 작동하지 않는다.
• 하지만data내가 Vue 문서로 알 수 있는 한, 소품들이 할 수 있는 방식으로 전달될 수 없다.

.

<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>

소품(말씀)으로 합격할 수 있다.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) );
    }
  }
}

참조URL: https://stackoverflow.com/questions/46175605/passing-default-data-to-vue-form-component