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

最新推荐文章于 2024-07-31 16:13:46 发布
最新推荐文章于 2024-07-31 16:13:46 发布
阅读量212 收藏
点赞数
分类专栏： vue
本文为博主原创文章，署名（BY）-非商业性使用（NC）-禁止演绎（ND），转载请附上原文链接和本申明。
本文链接：https://blog.csdn.net/qq_38060231/article/details/109346817
版权
本文探讨Vue组件的参数校验，包括如何限制父组件传递的参数类型，支持的对象校验及默认值设定。同时，解释了非props特性，即子组件如何避免直接使用父组件传递的参数，以防止错误。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

组件参数校验与非props特性

一、组件参数校验

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

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

二、非props特性

props特性：子组件会接收父组件传递的参数，还有个特点
在这里插入图片描述
非props特性：子组件不会接收父组件传递过来的参数，不能在子组件中使用父组件传递的参数，使用会报错
在这里插入图片描述
但是父组件传递的参数会在dom节点上显示
在这里插入图片描述

vue组件参数校验与非props特性
Hiroshi's
01-10 395
对于下面这样的一个父组件向子组件传值的简单例子 <body> <div id="app"> <child content="hello vue????"></child> </div> <script> Vue.component('child', { props: ['content'], template: '<div&g
Vue 组件：$ref & 父子组件的数据传递 & 组件参数校验与非 props 特性 & 给组件绑定原生事件 & 非父子组件间的传值 & 在 Vue 中使用插槽 & 作用域插槽 & 动态组件
Bule_daze的博客
05-11 534
使用组件的细节点 <table> <tbody> <row></row> <row></row> <row></row> </tbody> </table> <script> Vue.component('row', { template: '<tr><td>This is a row</td></tr>
详解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 177
1.组件参数校验——父组件向子组件传递一些内容，子组件有权对接收的内容进行一些约束（即组件接收的参数是有规则可定义的），这些约束就是组件参数校验。 子组件通过props接收传递参数，并说明传递参数的属性： type——参数类型 required——是否必传 default ——默认传的值 validator——自定义校验器，要求字符串长度等 2.props特性——子组件里声明了对父组件传递的属性的接收（父子组件之间有对应关系） （1）传递的属性不会在控制台的dom标签上显示 （2）子组件模板可以通过插值
vue中组件参数
Only_ruiwen的博客
07-07 2139
我们来聊一下vue中的组件参数. 1.vue中组件参数 我们可以为组件的 prop 指定验证要求，例如你知道的这些类型。如果有一个需求没有被满足，则 Vue 会在浏览器控制台中警告你。这在开发一个会被别人用到的组件时尤其有帮助。 我们来看下最为简单和常见的vue代码 &lt;div id="root"&gt; &lt;item content="hello"...
vue组件参数调用
最新发布
码上红尘仙的博客
07-31 181
父组件获取子组件数据。
vue组件传参数
qq_65537235的博客
05-07 578
总结：子组件传父组件消息的思路：子组件定义好defineEmits（）然后触发emits，并把消息发送给父组件，最后在父组件里面用@监听自定义的事件，最后通过绑定自定义事件的方法读取子组件传给父组件的消息。第三步：接收子组件的消息，因为是自定义的事件，因此用v-on监听，也就是@，因此在父组件里面监听自定义的事件，自定义事件绑定的方法都有一个参数，参数值就是子组件告诉父组件的消息。emits接收多个参数，第一个参数是自定义的事件名，后面的参数都是传给父亲的消息。2.接收父组件传给子组件的信息。
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基础学习-组件
weixin_40017062的博客
06-05 3758
vue基础学习-组件
常见vue组件间的参数的传递
xinmenglin的博客
04-16 653
常见vue组件间的参数的传递 父组件给子组件传值： 父组件通过props向下传递数据给子组件，子组件通过events给父组件发送消息 vue父子组件的关系可以概括为： 父组件通过props向下传递数据给子组件，子组件通过events给父组件发送消息 可以理解为： 1).父组件—>子组件：父组件传值给子组件使用Props属性 2).子组件—>父组件：子组件传值给父组件使用Emit事件。 ...
jsx怎么往js里传参数_React实战—学习必经之路-JSX语法（2）
weixin_36002475的博客
12-31 263
React必修技能JSX本篇我们来了解React的JSX语法，在此之前，我们先安装React。安装React安装注意：这里需要注意两点：1.第一点记得安装node,地址：https://nodejs.org/en/ 使用lts版本。2.安装脚手架，地址：https://github.com/facebookincubator/create-react-app。步骤：1.安装脚手架npm insta...
React propTypes校验组件参数类型
weixin_46728068的博客
01-07 608
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 1万+
以上是Vue中组件传参的三种常用方法，分别是Props、$emit和Provide/Inject。通过这些方法，我们可以在组件之间传递数据，实现组件之间的通信。
Vue 11种组件传参方式
guorui999的博客
01-17 5017
this.$router 相当于一个全局的路由器对象，包含了很多属性和对象（比如 history 对象），任何页面都可以调用其 push(), replace(), go() 等方法。this.$route 表示当前路由对象，每一个路由都会有一个 route 对象，是一个局部的对象，可以获取对应的 name, path, params, query 等属性。$children 获取子组件(所有的子组件，不保证顺序)$refs 组件获取组件实例，元素获取元素。$parent 获取父组件。
vue组件传参
fagdg的博客
07-27 4813
1、定义与使用2、父传子使用props，父传给子的数据是只读的(做默认值，读取显示)不能修改3、子传父使用的事件$emit$emit(事件名,事件值)发送一次事件，事件名{counterchange}和事件值{counter}是自定义的$event固定写法，事件的值{counterchange事件的值，也是子组件$emit的第二个参数}...
【Vue】Vue2组件传参总结来了（建议收藏）
10-20 5915
props/emit传参是最基础的组件通信方式，父组件通过props可以向子组件进行通信，子组件通过emit向父组件进行通信。最常见的父子组件通信方式props支持参数验证emit 只会触发父组件的监听事件不适合多层次组件参数传递，需要逐层传递参数通过 $patent / $children 可以拿到父子组件的实例 ，从而调用实例里的数据方法，实现父子组件通信eventBus,相当于所有组件共用一个事件中心，这个事件中心用来管理事件，当我们需要的时候就向事件中心发送或者接收事件。
【Vue】vue 组件各选项用法
qq_45677671的博客
07-22 1059
传值：props、数据：data、监听：watch、计算：computed、方法：methods 的使用案例 混入：mixins、继承：extends、传值：provider / inject 的使用案例 组件：components、过滤：filters、指令：directive 的使用案例
Vue组件传参的五种方式
热门推荐
漫漫漫漫的博客
03-15 5万+
Vue组件传参的五种方式 方法一 props传参 父组件 <template> <div class="wrap"> <div>我是Father组件</div> <Son str="我是字符串" :num=5 :obj="{cont:'我是一个对......
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、付费专栏及课程。

余额充值