深入理解Vue组件三——组件参数校验与props特性

最新推荐文章于 2024-05-17 08:00:00 发布
最新推荐文章于 2024-05-17 08:00:00 发布
阅读量661 收藏
点赞数
分类专栏： 深入理解Vue组件 文章标签： WEB前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Vansal/article/details/86816445
版权

组件参数校验

即子组件可以对父组件传递过来的值做一些约束

校验时须注意此时的props是一个对象而不是数组

如下图，父组件向子组件传递的content参数必须是字符串类型

父组件向子组件传递的content参数可以是字符串类型或数字类型

当然，父组件也可以不传值，让子组件使用初始值

required为false时表示父组件可以不传content值，为true时必须传content值

required为false可以使用default自定义content的值，但当父组件传递content值时，子组件自定义的值便会失效

我们还可以用校验器做一些更复杂的校验

props特性

当父组件调用子组件时，向子组件传递属性，且刚好子组件在props中声明了这个属性，即触发props特性

props特性特点：

父组件向子组件传递的属性不会在DOM结构中显示，且子组件可以直接使用这个属性中的内容

非props特性

当父组件调用子组件时，向子组件传递属性，子组件在props中没有声明这个属性，即触发非props特性

非props特性特点：

父组件向子组件传递的属性会在DOM结构中显示，且子组件不能使用这个属性中的内容

风里有诗句哈
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Vue 3 Props 类型
人生代码 ---- 公众号
10-21 4720
props 类型为什么需要 props 类型呢？就比如我们子组件需要用到父组件的数据，我们到底该使用何种方式传递进去呢？我们都知道在原生 DOM 中有一种 data- 属性，可以将数据绑...
Vue 组件参数校验与非props特性的方法
10-17
本文将深入探讨Vue组件参数校验以及非props特性。 ### Vue组件参数校验 在Vue中，组件可以通过`props`选项来定义其可接收的参数。例如，如果子组件需要一个名为`count`的参数，并且期望它是字符串类型，可以这样...
vuejs组件参数校验
weixin_30800807的博客
09-16 232
父组件向子组件传递一些参数，那么子组件有权对这些参数进行一个校验，这个就是组件参数校验 需求：父组件传递过来的必须是个字符串，这个要怎么去校验呢 <div id='root'> 　　<child content='hello world'></child> </div> <script> Vue.c...
详细分析Vue3中的props用法（父传子）
最新发布
码农研究僧的博客
05-17 5160
在 Vue 3 中，父组件可以通过 props 向子组件传递数据 子组件通过 defineProps 或 props 来定义它接收的属性 这些属性在子组件中可以直接使用
vue3深入组件：Prop 校验
Strangersss的博客
07-03 744
Vue 组件可以更细致地声明对传入的 props 的校验要求。比如我们上面已经看到过的类型声明，如果传入的值不满足类型要求，Vue 会在浏览器控制台中抛出警告来提醒使用者。这在开发给其他开发者使用的组件时非常有用。要声明对 props 的校验，你可以向。
vue多个组件校验
weixin_47093559的博客
06-17 675
vue同时校验多个子组件form表单
Vue.js 组件编码规范
weixin_30355437的博客
03-13 111
Vue.js 组件编码规范（最下文附有本人写的demo地址） 目标 本规范提供了一种统一的编码规范来编写Vue.js代码。这使得代码具有如下的特性： 其它开发者或是团队成员更容易阅读和理解。 IDEs 更容易理解代码，从而提供高亮、格式化等辅助功能 更容易使用现有的工具 更容易实现缓存以及代码包的分拆 本指南为De Voorhoede参考RiotJS 编码...
Vue 组件复用多次自定义参数操作
10-15
此外，Vue组件还支持一种强大的功能——插槽（Slot），用于在组件内部插入自定义内容。插槽允许父组件动态地向子组件传递内容，而无需使用props。例如，我们创建一个`my-blog`组件，它有一个默认插槽，可以插入任意...
深入理解Vue 组件之间传值
10-18
本文将深入探讨Vue组件间的数据传递，包括父组件向子组件传递数据、子组件向父组件传递数据以及子组件之间的间接通信。 一、父组件向子组件传递数据 Vue中，最常用的数据传递方式是通过props（属性）。在子组件中...
vue组件命名和props命名代码详解
10-16
下面将详细讲解Vue组件命名和props命名的规则及最佳实践。 首先，Vue组件的命名有以下几种方式： 1. **kebab-case（短横线命名）**：例如`my-component`。这种命名方式在HTML中书写最为直观，因为HTML属性名称不...
vue3---props验证
qq_61950936的博客
08-16 3335
这篇文章介绍vue组件基础中的props验证，文章持续输出中！ 废话不多说，直接上刺刀！！ 1. 什么是 props 验证 指的是：在封装组件时对外界传递过来的 props 数据进行合法性的校验，从而防止数据不合法的问题。...
27 Vue组件传值时的校验操作
wgchen
12-03 857
[组件]Vue组件传值时的校验操作阐述准备基本文件对类型的校验必填校验和默认值设置required 必填项default 默认值精准校验 validator 阐述 现在你已经可以轻松的给组件进行传值了，用起来很方便和自由，在实际开发中，这些传递的参数也很可能是通过用户的输入而获得的，必要的前端验证是必不可少的。 但是在组件中也需要作最基本的验证。 本节我们就一起来学习一下Vue3中组件传值的验证。 准备基本文件 <!DOCTYPE html> <html lang="en"> &l
vue3学习7：props以及验证
weixin_43788986的博客
07-09 1552
props 是组件的自定义属性，组件的使用者可以通过 props 把数据传递到子组件内部，供子组件内部进行使用。 在封装 vue 组件时，可以把动态的数据项声明为 props 自定义属性。自定义属性可以在当前组件的模板结构中被直接使用。 然后需要在父组件中调用： 具体代码如下： HiVue.vue: app.vue 效果如下： 如果父组件给子组件传递了未声明的 props 属性，则这些属性会被忽略，无法被子组件使用。 可以使用 v-bind 属性绑定的形式，为组件动态绑定 props 的值。举个栗子 修
vue3-组件传参及计算属性
唯见青山不见君
11-24 2541
vue3-组件传参及计算属性
vue中组件参数校验几个重点
qiguoqi777的博客
04-23 111
<div id="app"> <test content="123"></test> </div> Vue.component("test",{ template: '<div>{{content}}</div>', props:{ content: { type: String, ...
Vue2 关于props的使用 声明与校验
m0_56358827的博客
12-18 1027
一个组件需要显式声明它所接受的 props，这样 Vue 才能知道外部传入的哪些是 props，哪些是透传 attribute（）注： key 是要接收prop 的名称，而值则是该 prop 预期类型的构造函数。注： props 挂载到vue实例上 会暴露到 `this` 上 通过。props 需要使用。
vue组件中各个属性简单了解
u012379844的专栏
09-25 1884
由于刚刚接触vue，以下内容为本人的一些简单的了解，方便知道什么情况下该用哪个 1、name：组件的名称 2、props：父组件传值给子组件（可以是单个值，也可以是一个对象，或者数组等） 3、data：子组件需要的数据定义在这里面 4、computed：称为计算属性，用来控制该组件自己的变量，该变量不在data里面声明，直接在computed里面定义，然后经过一系列的计算等操作之后，返回。所以，computed比较适合对多个变量或者对象进行处理后返回一个结果的值。如果data中的数据不改变的话，直接
vue组件的属性使用和不使用冒号的区别
Ewet
10-13 6682
加冒号的，说明后面的是一个变量或者表达式；没加冒号的后面就是对应的字符串字面量！ 列：   &lt;input :disable="true"&gt;打开&lt;/input&gt; 输出：true 或 false   值是变量/Boolean类型 &lt;input disable="true"&gt;打开&lt;/input&gt; 输出：true   值是String类型  ...
Vue2.0开发之——Vue组件-组件属性(34)
我的博客
12-10 2348
为Count组件添加自定义属性为自定义属性添加v-bind自定义属性props是只读的自定义属性default默认值自定义属性type值类型自定义属性required必填值moreprops 是组件的自定义属性，在封装通用组件的时候，合理地使用 props 可以极大的提高组件的复用性！它的语法格式如下//组件的自定义属性props:['自定义属性A','自定义属性B','其他自定义属性...'],//组件的私有数据data(){return {}}}布局代码。
Vue基础知识.pptx
03-24
Vue是一种流行的前端框架，这个PPT旨在帮助面试者加深对于Vue的基本概念和原理的了解。在数据绑定方面，可以介绍Vue的单向数据流和双向数据绑定的概念，并应用在实际的代码场景中。在组件方面，可以解释组件的定义和使用方法，并结合示例代码演示Vue组件的各种应用场景。在指令方面，可以介绍指令的作用和常见的指令类型，并结合代码实例讲解Vue指令在页面中的使用方法和实际应用案例。总之，这个PPT将涵盖Vue面试中重要的基础知识，帮助面试者有效准备面试。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

风里有诗句哈

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值