Vue深入理解组件-组件参数校验与非props特性

最新推荐文章于 2023-05-03 15:17:16 发布
最新推荐文章于 2023-05-03 15:17:16 发布
阅读量123 收藏
点赞数
分类专栏： vue
本文为博主原创文章，署名（BY）-非商业性使用（NC）-禁止演绎（ND），转载请附上原文链接和本申明。
本文链接：https://blog.csdn.net/qq_38060231/article/details/109346817
版权

组件参数校验与非props特性

一、组件参数校验

有时候我们需要限制父组件传递给子组件的参数类型
在这里插入图片描述
限制的类型可以不唯一，可以有多种类型
在这里插入图片描述
对象的写法也是正确的
在这里插入图片描述
可以做必填校验，使用默认值
在这里插入图片描述
type 可以是下列原生构造函数中的一个：
在这里插入图片描述

还可以在validator中写更加复杂的校验
在这里插入图片描述

最低0.47元/天 解锁文章
多一点开心
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
详解vue中组件参数
12-29
我们来聊一下vue中的组件参数. 1.vue中组件参数 我们可以为组件的 prop 指定验证要求，例如你知道的这些类型。如果有一个需求没有被满足，则 Vue 会在浏览器控制台中警告你。这在开发一个会被别人用到的组件时尤其有帮助。 我们来看下最为简单和常见的vue代码 <div id=root> <item content=hello></item> </div> [removed] Vue.component(item,{ props:[content], template:<div>{{content}
Vue-组件参数校验与非props特性
weixin_45497246的博客
05-13 133
1.组件参数校验——父组件向子组件传递一些内容，子组件有权对接收的内容进行一些约束（即组件接收的参数是有规则可定义的），这些约束就是组件参数校验。 子组件通过props接收传递参数，并说明传递参数的属性： type——参数类型 required——是否必传 default ——默认传的值 validator——自定义校验器，要求字符串长度等 2.props特性——子组件里声明了对父组件传递的属性的接收（父子组件之间有对应关系） （1）传递的属性不会在控制台的dom标签上显示 （2）子组件模板可以通过插值
vue中组件参数
Only_ruiwen的博客
07-07 2044
我们来聊一下vue中的组件参数. 1.vue中组件参数 我们可以为组件的 prop 指定验证要求，例如你知道的这些类型。如果有一个需求没有被满足，则 Vue 会在浏览器控制台中警告你。这在开发一个会被别人用到的组件时尤其有帮助。 我们来看下最为简单和常见的vue代码 &lt;div id="root"&gt; &lt;item content="hello"...
常见vue组件间的参数的传递
xinmenglin的博客
04-16 601
常见vue组件间的参数的传递 父组件给子组件传值： 父组件通过props向下传递数据给子组件，子组件通过events给父组件发送消息 vue父子组件的关系可以概括为： 父组件通过props向下传递数据给子组件，子组件通过events给父组件发送消息 可以理解为： 1).父组件—>子组件：父组件传值给子组件使用Props属性 2).子组件—>父组件：子组件传值给父组件使用Emit事件。 ...
jsx怎么往js里传参数_React实战—学习必经之路-JSX语法（2）
weixin_36002475的博客
12-31 216
React必修技能JSX本篇我们来了解React的JSX语法，在此之前，我们先安装React。安装React安装注意：这里需要注意两点：1.第一点记得安装node,地址：https://nodejs.org/en/ 使用lts版本。2.安装脚手架，地址：https://github.com/facebookincubator/create-react-app。步骤：1.安装脚手架npm insta...
Vue 组件参数校验与非props特性的方法
10-17
本文将深入探讨Vue组件参数校验以及非props特性。 ### Vue组件参数校验 在Vue中，组件可以通过`props`选项来定义其可接收的参数。例如，如果子组件需要一个名为`count`的参数，并且期望它是字符串类型，可以这样...
Vue element-ui父组件控制子组件的表单校验操作
10-15
总的来说，Vue Element-UI的父组件控制子组件的表单校验操作主要是通过`ref`属性创建子组件引用，然后在父组件中调用子组件的校验方法来实现的。子组件则通过`el-form`和`el-form-item`的`prop`属性来设置验证规则，...
vue组件开发props验证的实现
12-29
在Vue中父组件向子组件中传送数据是通过props实现的，一个简单的使用props的例子： <!DOCTYPE html> <html> <head> <meta charset=utf-8> <title>Vue Study</title> </head&...
React propTypes校验组件参数类型
weixin_46728068的博客
01-07 545
1.propsTypes 的使用 （1）设置属性和属性值来约束组件参数的类型。 （2）设置组件参数为必须传入isRequired import PropTypes from 'prop-types' TodoItems.propTypes = { test :PropTypes.string.isRequired, content : PropTypes.string, deleteItem : PropTypes.func, index: PropTypes.number
vue中组件传参的几种方法
zhangkunsir的博客
05-03 9566
以上是Vue中组件传参的三种常用方法，分别是Props、$emit和Provide/Inject。通过这些方法，我们可以在组件之间传递数据，实现组件之间的通信。
Vue 11种组件传参方式
guorui999的博客
01-17 4756
this.$router 相当于一个全局的路由器对象，包含了很多属性和对象（比如 history 对象），任何页面都可以调用其 push(), replace(), go() 等方法。this.$route 表示当前路由对象，每一个路由都会有一个 route 对象，是一个局部的对象，可以获取对应的 name, path, params, query 等属性。$children 获取子组件(所有的子组件，不保证顺序)$refs 组件获取组件实例，元素获取元素。$parent 获取父组件。
vue组件传参
fagdg的博客
07-27 4724
1、定义与使用2、父传子使用props，父传给子的数据是只读的(做默认值，读取显示)不能修改3、子传父使用的事件$emit$emit(事件名,事件值)发送一次事件，事件名{counterchange}和事件值{counter}是自定义的$event固定写法，事件的值{counterchange事件的值，也是子组件$emit的第二个参数}...
【Vue】Vue2组件传参总结来了（建议收藏）
10-20 5319
props/emit传参是最基础的组件通信方式，父组件通过props可以向子组件进行通信，子组件通过emit向父组件进行通信。最常见的父子组件通信方式props支持参数验证emit 只会触发父组件的监听事件不适合多层次组件参数传递，需要逐层传递参数通过 $patent / $children 可以拿到父子组件的实例 ，从而调用实例里的数据方法，实现父子组件通信eventBus,相当于所有组件共用一个事件中心，这个事件中心用来管理事件，当我们需要的时候就向事件中心发送或者接收事件。
Vue组件传参的五种方式
热门推荐
漫漫漫漫的博客
03-15 5万+
Vue组件传参的五种方式 方法一 props传参 父组件 <template> <div class="wrap"> <div>我是Father组件</div> <Son str="我是字符串" :num=5 :obj="{cont:'我是一个对......
Vue的常用参数
qq_34771938的博客
10-05 2705
名称 描述 data() 该函数返回组件实例的 data 对象。 computed 计算属性将被混入到组件实例中。 methods methods 将被混入到组件实例中。 watch 一个对象，键是要侦听的响应式 property。 template 一个字符串模板，用作 component 实例的标记。 1. data() 该函数返回组件实例的 data 对象。 实例创建之后，可以通过 vm.$data 访问原始数据对象。 组件实例也代理
VUE3 之 组件传参
追风人的博客
01-21 5047
目录 1. 概述 2. 组件传参 3. 综述 4. 个人公众号 1. 概述 韦奇定律告诉我们：大部分人都很容易被别人的话所左右，从而开始动摇、怀疑，最终迷失自我。因此我们要努力的坚定信念，相信自己，才不会被周围的环境所左右，才能取得最终的胜利。 言归正传，之前我们聊了组件的概念，既然有多个组件，那自然存在组件间传参的问题，今天我们就来聊聊 VUE 的 组件传参。 2. 组件传参 2.1 初识组件传参 <body> <div id="myDiv">
Vue组件间常用传参方式
Tang__CT的博客
04-24 3335
Vue组件间常用传参方式 1. props、emit（最常用的父子通讯方式） 父传子 父组件传入属性，子组件通过props接收，就可以在内部this.XXX的方式使用 // 父组件 <hello-world msg="hello world!"><hello-world> // 子组件 <div>{{msg}}</div> props：['msg'] 子传父 子组件$emit（事件名，传递的参数）向外弹出一个自定义事件，在父组件中监听子组件的自定义
快速了解 Vue 组件间的参数传递方式？
CjBkl的博客
06-30 368
（1）父子组件间通信 第一种方法是子组件通过 props 属性来接受父组件的数据，然后父组件在子组件上注册监听事 件，子组件通过 emit 触发事件来向父组件发送数据。 第二种是通过 ref 属性给子组件设置一个名字。父组件通过 $refs 组件名来获得子组件，子 组件通过 $parent 获得父组件，这样也可以实现通信。 第三种是使用 provider/inject，在父组件中通过 provider 提供变量，在子组件中通过inject 来将变量注入到组件中。不论子组件有多深，只
浅谈Vue组件传参（常见的几种通信方式）
WhyBecause的博客
12-13 1万+
Vue的通信方式，也可以说是传参方式。主要分为四种： 父子传参 子父传参 相邻兄弟传参（亲兄弟） 远兄弟传参（表兄弟） 一、父子传参 原理：父控制子，通过子组件的props属性，抛出子组件自定义标签属性，来接收父组件的操作状态 例子：父级里的一个按钮，控制子组件里的一个div的显示隐藏 &amp;amp;amp;amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;
vue+element-plus 父组件校验子组件的form表单
最新发布
06-12
可以通过在父组件中引用子组件并调用子组件的方法来实现校验子组件的form表单。 首先，在子组件中暴露一个校验方法，例如： ```javascript <el-form ref="form" :model="formData" :rules="rules"> <!-- 表单...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值