vue prop value type verification method

prop value pass verification rules

If prop is a static value passed, it must be of String type

If prop is dynamically transmitted, any type can be verified

Example, if you have to pass a Number, you must use bind

//statement("blog-post", {
 props: {
  postTitle: {
   type: Number,
   default: 10000
  }
 },
 template: "<h3>{{ postTitle }}</h3>"
});
//Call in template, pass the value statically, the value must be String<blog-post postTitle="54"></blog-post>
//Call in template to pass the value dynamically, the values ​​can be String, Number, Boolen.  .  .<blog-post :postTitle="54"></blog-post>

The type checked type value can be one of the following native constructors:

String

Number

Boolean

Array

Object

Date

Function

Symbol

type can also be a custom constructor and check and confirm through instanceof.

Example:

//For example, given the following ready-made constructor:function Person (firstName, lastName) {
  = firstName
  = lastName
}
//Can be used to verify whether it is a Person instance('blog-post', {
 props: {
  author: Person
 }
})

Supplementary knowledge:Prop verification, type checking and precautions in vue

1. Note: null and undefined will pass any type of detection

2. If the array or object type needs to provide default values, it needs to be returned through the function.See here for details

 props:{// The default value of an array or object needs to be returned through a function  authInfo:{
  type:Object,
        default(){
   return{
   name:'Zhang San',
            sex:0
          }
        }
      },
      list:{
  type:Array,
        default(){
   return[
   1,2,3
          ]
        }
      }
    }

3. Verify using custom functions

    props:{
  address:{
  validator(value){
          return ['Heilongjiang','Jilin','Liaoning'].indexOf(value) !== -1
        }
      }
    }

4. Non-prop features: If a property is passed to a component, but the component does not define the corresponding prop. Then this property is called a non-prop feature. Non-prop attributes will act on the root element of the component.

If it is not the prop that contains the attributes defined by components and elements. Then values ​​in non-prop will override the value defined by the component (this case is called non-prop inheritance). Style and class exceptions, they merge.

See here for details

What should I do if I don’t want non-prop inheritance?

If you do not want non-prop to automatically act on the root element of the component, you can add inheritAttrs option to the component options of vue (this option cannot affect the binding of class and style).

inheritAttrs:false

inheritAttrs attribute can be combined with $attrs and can be used non-prop to elements that developers want to act on. And not acting on the root element. example:

<template>
  <div>
    <input type="text" v-bind="$attrs">  <!--Will notpropBind to this element-->
  </div>
</template>
<script>
 export default {
 name: "sg-test",
    inheritAttrs:false,//Not prop inheritance is prohibited }
</script>

The above vue prop value type verification method is all the content I share with you. I hope you can give you a reference and I hope you can support me more.