Props Validation

<template>
  <button type="button" @click="onClickAge">Update Age</button>
  <p>The user is {{ age }} years old</p>
  <p>{{ ageDoubled }}</p>
</template>

<script>
export default {
  name: "User",
  props: {
    age: {
      type: Number,
      // required: true,
      // default: 20,
      validator(value) {
        return value < 130;
      }
    }
  },
  emits: ["age-change"],
  computed: {
    ageDoubled() {
      return this.age * 2;
    }
  },
  methods: {
    onClickAge() {
      this.$emit("age-change", 3)
    }
  }
}
</script>

props에 자료형과 require, default, validator 등을 넣어서 더 정확하게 props를 사용할 수 있다.

또한, validator 함수는 component의 인스턴스가 새성되기 전에 먼저 생성되기 때문에, data/computed/methods 등에 접근이 불가하다.

이것 외에도, 다양한 설정을 놓을 수 있다.

 

https://v3.vuejs.org/guide/component-props.html#prop-validation

Props | Vue.js