Prop का Validation

Prop validation एक component को हर prop के लिए type, requirement, और rules declare करने देता है, development में warnings के साथ।

In this page:

Prop Validation

Syntax

markup

props: {
  propName: {
    type: Type,
    required: true,
    default: value,
    validator(value) {
      return condition;
    }
  }
}

Prop Validation

type, required, और validator वाला props का object form इस्तेमाल करें। जब एक value match न हो Vue development builds में warn करता है। Types में String, Number, Boolean, Array, Object, Function, और custom classes शामिल हैं, और आप एक array से कई types allow कर सकते हैं।

Note: Validation warnings सिर्फ development builds में appear होते हैं।

उदाहरण: Prop validation

markup

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
  <level-badge :level="3" label="Gold"></level-badge>
  <level-badge level="oops" label="Bad"></level-badge>
</div>
<script>
  const app = Vue.createApp({});
  app.component("level-badge", {
    props: {
      level: { type: Number, required: true, validator: (v) => v >= 1 && v <= 5 },
      label: { type: String, required: true },
    },
    template: "<p>{{ label }}: level {{ level }}</p>",
  });
  app.config.warnHandler = (msg) => console.log("warning:", msg.split("\n")[0]);
  app.mount("#app");
</script>
</body>
</html>

<!-- Output:
Rendered: Gold: level 3Bad: level oops
console: warning: Invalid prop: type check failed for prop "level". Expected Number with value NaN, got String with value "oops".
-->

Live Example

Chapter Quiz — Complete all 7 topics to unlock

0/7 topics done

Complete these topics first:

← Previous Lesson Event bus Next Lesson → Default props

Prop का Validation

Prop Validation

Chapter Quiz — Complete all 7 topics to unlock

Login to run this code