VUE组件开发-props验证

最新推荐文章于 2023-09-22 11:08:59 发布
最新推荐文章于 2023-09-22 11:08:59 发布
阅读量315 收藏 5
点赞数
分类专栏： vue 文章标签： props
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40413396/article/details/85091997
版权

为什么要有props验证

在Vue中父组件向子组件中传送数据是通过props实现的，想象一下当有一个人要使用foo-component组件的时候，他可能对于其要接受的参数有什么要求并不是很清楚，因此传入的参数可能会在开发子组件的人的意料之外，程序就会发生错误，就像我们在函数调用之前先检查一下函数一样，props也可以进行一个预先检查。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue Study</title>
</head>
<body>

    <div id="app">
        <foo-component :foo-message="fooMessage"></foo-component>
    </div>

<script type="text/javascript" src="lib/vue.js"></script>
<script type="text/javascript">

    var fooComponent = {
        props: {
            fooMessage: Number
        },
        template: '<div> {{ fooMessage }} </div>'
    };

    var vm = new Vue({
        components: {
            'foo-component': fooComponent
        },
        el: '#app',
        data: {
            fooMessage: 123
        }
    });

</script>
</body>
</html>

可以使用type来声明这个参数可以接受的数据的类型，当检查规则只有一个的时候type可以略写 如:fooMessage: Number

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue Study</title>
</head>
<body>

    <div id="app">
        <foo-component :foo-message="fooMessage"></foo-component>
    </div>

<script type="text/javascript" src="lib/vue.js"></script>
<script type="text/javascript">

    var fooComponent = {
        props: {
            fooMessage: [Number, String]
        },
        template: '<div> {{ fooMessage }} </div>'
    };

    var vm = new Vue({
        components: {
            'foo-component': fooComponent
        },
        el: '#app',
        data: {
            fooMessage: 123
        }
    });

</script>
</body>
</html>

当参数可以是多种类型的其中一个的时候，使用数组来表示。 如 fooMessage: [Number, String]

type能够指定的类型

type可以是以下原生类型：

String

Number

Boolean

Function

Object

Array

Symbol

required

可以使用required选项来声明这个参数是否必须传入。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue Study</title>
</head>
<body>

    <div id="app">
        <foo-component :foo-message="fooMessage"></foo-component>
    </div>

<script type="text/javascript" src="lib/vue.js"></script>
<script type="text/javascript">

    var fooComponent = {
        props: {
            fooMessage: {
                type: Number,
                required: true
            }
        },
        template: '<div> {{ fooMessage }} </div>'
    };

    var vm = new Vue({
        components: {
            'foo-component': fooComponent
        },
        el: '#app',
        data: {
            fooMessage: 256
        }
    });

</script>
</body>
</html>

当未传入参数时：会抛出异常

default

使用default选项来指定当父组件未传入参数时props变量的默认值：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue Study</title>
</head>
<body>

    <div id="app">
        <foo-component></foo-component>
    </div>

<script type="text/javascript" src="lib/vue.js"></script>
<script type="text/javascript">

    var fooComponent = {
        props: {
            fooMessage: {
                type: Number,
                default: 128
            }
        },
        template: '<div> {{ fooMessage }} </div>'
    };

    var vm = new Vue({
        components: {
            'foo-component': fooComponent
        },
        el: '#app',
        data: {
            fooMessage: 256
        }
    });

</script>
</body>
</html>

当type的类型为Array或者Object的时候default必须是一个函数：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue Study</title>
</head>
<body>

    <div id="app">
        <foo-component></foo-component>
    </div>

<script type="text/javascript" src="lib/vue.js"></script>
<script type="text/javascript">

    var fooComponent = {
        props: {
            fooMessage: {
                type: Array,
                default: function(){
                    return ['foo', 'bar'];
                }
            }
        },
        template: '<div> {{ fooMessage }} </div>'
    };

    var vm = new Vue({
        components: {
            'foo-component': fooComponent
        },
        el: '#app',
        data: {
            fooMessage: ['f', 'o', 'o']
        }
    });

</script>
</body>
</html>

validator 自定义

当校验规则很复杂，默认提供的校验规则无法满足的时候可以使用自定义函数来校验。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue Study</title>
</head>
<body>

    <div id="app">
        <foo-component :foo-message="fooMessage"></foo-component>
    </div>

<script type="text/javascript" src="lib/vue.js"></script>
<script type="text/javascript">

    var fooComponent = {
        props: {
            fooMessage: {
                validator: function(value){
                    return value>=0 && value<=128;
                }
            }
        },
        template: '<div> {{ fooMessage }} </div>'
    };

    var vm = new Vue({
        components: {
            'foo-component': fooComponent
        },
        el: '#app',
        data: {
            fooMessage: 100
        }
    });

</script>
</body>
</html>

综上所述

props: {
    // fooA只接受数值类型的参数
    fooA: Number,
    // fooB可以接受字符串和数值类型的参数
    fooB: [String, Number],
    // fooC可以接受字符串类型的参数，并且这个参数必须传入
    fooC: {
        type: String,
        required: true
    },
    // fooD接受数值类型的参数，如果不传入的话默认就是100
    fooD: {
        type: Number,
        default: 100
    },
    // fooE接受对象类型的参数
    fooE: {
        type: Object,
        // 当为对象类型设置默认值时必须使用函数返回
        default: function(){
            return { message: 'Hello, world' }
        }
    },
    // fooF使用一个自定义的验证器
    fooF: {
        validator: function(value){
            return value>=0 && value<=100;
        }
    }
}
oKven_
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
props属性的验证
tangren_wyx的博客
04-23 1545
1. props属性验证 注意：还是会正常的运行代码，只是对数据类型进行验证，判断是否有误 常用形式： props: { key: keyType // key是从父组件获得的自定义属性， 值是我们期望得到的数据类型 } 如下所示： 报错 ： 需求：我现在想要 > 1000 我才要， 没有 > 1000 我就不要 解决： vue提供了一个 ：validator p...
vue中的prop验证
li_shujun的博客
02-17 1447
Prop 1 . prop 大小写 Vue.component('blog-post', { // 在 JavaScript 中是 camelCase 的 props: ['postTitle'], template: '<h3>{{ postTitle }}</h3>' }) <!-- 父组件中 kebab-case 的 --> <blog-post post-title="hello!"></blog-post> 1234567 2 .单项数
vue之prop
田兴的博客
12-30 2102
Prop 1 . prop 大小写 Vue.component('blog-post', { // 在 JavaScript 中是 camelCase 的 props: ['postTitle'], template: '<h3>{{ postTitle }}</h3>' }) <!-- 父组件中 kebab-case 的 --> <blog-...
Vue组件props参数的校验
qq_43592064的博客
07-18 732
Vue组件props参数的校验
vue, props, validator
hbinn_0的博客
11-22 429
props的validator函数详细
vue组件-props
Q10Viking's Blog
03-04 407
编写组件 包邮组件 vue,父组件数据，子组件显示父组件传递过来的数据，在子组件中修改数据，也能反映到父组件中。 vue code sand box 参考链接 vue .sync doc github讨论 我处理的情况 简单例子 ...
VueJs组件prop验证简单理解
09-12 2801
今天看了vuejs的组件，看到了prop组件，主要作用是在传入数据的时候对传入的值做判断，写了个小例子。<div id="app"> <my-child :num="100" :msg="'sdf'" :object="{a:'a'}" :cust="100" ></chi
vue组件开发props验证的实现
10-17
### Vue组件props的定义 在Vue中，组件是由props接收父组件传递过来的数据，通常在组件定义时声明props属性，以明确指出组件期望从外部接收哪些数据。这不仅有助于文档生成，也便于Vue在模板渲染时对数据进行校验。...
vue-父组件向子组件传值---props
m0_62903673的博客
07-11 449
vue-父组件向子组件传值---props
Vue.js组件props数据验证实现详解
10-16
在提供的示例代码中，展示了一个名为`my-component`的Vue组件，其中定义了几个props，并对它们进行了验证： ```*** ***ponent('my-component', { props: { // 必须是数字类型 propA: Number, // 必须是字符串或...
vue组件获取props_vue组件之属性Props
weixin_32051661的博客
12-24 1561
组件的属性和事件父子组件之间的通信父子组件之间的通信就是 props down,events up，父组件通过 属性props向下传递数据给子组件，子组件通过 事件events 给父组件发送消息。比如，子组件需要某个数据，就在内部定义一个prop属性，然后父组件就像给html元素指定特性值一样，把自己的data属性传递给子组件的这个属性。而当子组件内部发生了什么事情的时候，就通过自定义事件来把这个...
Vue2.0Props验证
你的益达啊
09-22 327
props:{ propsD:{ //通过validator函数，对propsD属性的值进行校验，“属性的值”可以通过形参 value进行接受 validator（value）{ //propsD属性的值，必须匹配下列字符串中的一个 //validator 函数的返回值为true 表示验证通过 ，false 表示验证失败 return ['success' , 'warning' , 'dang.
框架技术 ----Vue的props验证和自定义事件
a23452的博客
03-13 3405
Vue框架 内容管理props验证对象类型的pros结点props验证计算属性 computed计算属性 --- 方法计算属性案例自定义事件自定义事件使用步骤声明自定义事件 emits触发自定义事件 this.$emits('name')父组件监听自定义事件自定义事件传参组件的v-model组件上使用v-model父传子子传父任务列表案例 Vue3基础：组件化开发 前面简单介绍了组件化的思想和SPA，组件的注册，还有组件的style和css等的绑定，而关于深度的组件化的概念： 比如计算属性，props
验证 Vue Props 类型，这几种方式你可能还没试用过
油墨香^-^的博客
08-30 3575
随着应用程序规模的扩大，类型检查是防止错误的第一道防线。结合TypeScript，它可以让你对正确使用组件接口有很高的信心，减少bug，提高整体代码质量和开发体验。
vue源码解析pdf_Vue源码逐行解析十三 validateProp函数 （处理props参数）
weixin_39998541的博客
12-09 281
首先我们打开‘src/core/instance/lifecycle.js'文件，代码如下：export function validateProp ( key: string, propOptions: Object, propsData: Object, vm?: Component): any { const prop = propOptions[key] const absen...
当vue里面props属性type为数组或者对象需要设置默认值为空数组或对象
我的博客
07-26 6904
一、vue官方文档解释为该prop指定一个默认值。如果该prop没有被传入，则换做用这个值。对象或数组的默认值必须从一个工厂函数返回。
Props with type Object/Array must...
seimeii的博客
07-25 493
Props with type Object/Array must..
解决vue props传Array/Object类型值,子组件报错的情况
m0_46569495的博客
03-19 1666
项目场景： Props with type Object/Array must use a factory function to return the default value. 问题描述 解决vue props传Array/Object类型值,子组件报错的情况 props:{ projectTypes: { type: Array, default: [] } } 或者 props:{ projectTypes: { type: Object, de
vue props 设置属性值常见类型（多类型）
最新发布
爱尚丽明的博客
09-22 895
vue props常见属性值类型，多类型
Vue组件开发：props验证及其重要性
总结来说，Vue组件开发中的props验证是确保组件间数据传递安全的关键。通过合理的类型声明、必填标记以及自定义校验规则，我们可以预防因错误数据导致的意外行为，提升代码质量和用户体验。学习并熟练运用这些验证...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值