vue prop传值类型检验

prop 传值检验规则

如果是 prop 是静态传值，则必须是 String 类型
如果是 prop 是动态传值，则可以验证任意类型
示例，如果必须要传一个Number，就必须使用 bind

//声明
Vue.component("blog-post", {props: {postTitle: {type: Number,default: 10000}},template: "<h3>{{ postTitle }}</h3>"
});
//在template中调用，静态传值，值必定是 String
<blog-post postTitle="54"></blog-post>
//在template中调用，动态传值，值可以是 String、Number、Boolen。。。
<blog-post :postTitle="54"></blog-post>

类型检查的 type 值，可以是下列原生构造函数中的一个：

String
Number
Boolean
Array
Object
Date
Function
Symbol
type 还可以是一个自定义的构造函数，并且通过 instanceof 来进行检查确认。示例：

//例如，给定下列现成的构造函数：
function Person (firstName, lastName) {this.firstName = firstNamethis.lastName = lastName
}
//可以使用,检验是否为 Person 的实例
Vue.component('blog-post', {props: {author: Person}
})

vue prop传值类型检验相关推荐

vue中传值和传引用_vue prop属性传值与传引用示例
vue prop属性传值与传引用示例 vue组件在prop里根据type决定传值还是传引用. 简要如下: 传值:String.Number.Boolean 传引用:Array.Object 若想将数组 ...
vue组件传值 prop传递对象
vue组件传值 prop传递对象大家经常会使用组件传值,今天我用到的时候突然遇到了一些坑,想着今天来记录一下,大家做一个参考,此篇仅说一下prop传递对象. 子组件接收基本的数据类型子组件 < ...
vue中prop传值
props配置项功能:让组件接收外部传过来的数据传递数据:<Demo name="xxx"/> 接收数据: 第一种方式(只接收):props:['name'] 第二 ...
[vue] prop验证的type类型有哪几种？
[vue] prop验证的type类型有哪几种? props:{title:String,likes: Number,isPublished: Boolean,commentIds: Array,au ...
Vue组件传值-父传子（一）(使用prop)
以下内容纯属个人理解,旨在记录和分享. 值传递-父传子实现父组件向子组件的值传递. 在父组件(即使用子组件的组件)中,使用子组件并向其中传递一个静态字符串值(不变的固定的即为静态). 子组件中使用p ...
vue组件传值的十种方式
vue组件传值的十种方式一.props 父传子子组件 // 第一种数组方式 props: [xxx, xxx, xxx] // 第二种对象方式 props: { xxx: Number, xxx: ...
vue组件传值方式有哪些
Vue 作为一个轻量级的前端框架,核心两大特性就是响应式编程和组件化. 本文针对组件之间传值做详细讲解. Vue就是由一个一个的组件构成的,组件化是它的精髓,也是最强大的功能之一.而组件实例的作用域是 ...
vue-property-decorator 提供 OO 的风格 Vue Component 方便类型声明
@Prop 父子组件之间传值 Install: npm install --save vue-property-decorator Child: <template><div> ...
[vue] prop是怎么做验证的？可以设置默认值吗？
[vue] prop是怎么做验证的?可以设置默认值吗? 单个类型就用Number等基础类型,多个类型用数组,必填的话设置require为true,默认值的话设置default,对象和数组设置默认用工厂 ...

vue prop传值类型检验

prop 传值检验规则

类型检查的 type 值，可以是下列原生构造函数中的一个：

vue prop传值类型检验相关推荐

最新文章

热门文章