Vue 组件参数校验与非props特性的方法


Posted in Javascript onFebruary 12, 2019

子组件接收父组件的参数的时候,props注册接收的参数

props:['count']

子组件可以对接收的参数校验。

例如规定接收的count参数要求是String

props:{
count:String
}

如果count是别的类型就会报错  

组件的参数校验

组件的参数校验指的是什么呢?你父组件向子组件传递的内容,子组件有权对这个内容进行一些约束,这个约束我们可以把它叫做参数的校验。

<div id="root">
  <child content="hello world"></child>
</div>
Vue.component('child',{
  props: ['content'],
  template: '<div>{{content}}</div>'
})
let vm = new Vue({
  el: '#root',
})

现在有这样一个需求,父组件调用子组件的时候,传递的这个content,我要做一些约束,要求它我传递过来的content必须是一个字符串,我们该怎么实现呢?

<div id="root">
  <child content="hello world"></child>
</div>
Vue.component('child',{
  props: {
    content: String     //子组件接收到的 content 这个属性,必须是一个字符串类型的
  },
  template: '<div>{{content}}</div>'
})
let vm = new Vue({
  el: '#root',
})

组件接收到的content这个属性,必须是一个字符串类型的,如果我需要的参数类型是字符串或者数组,又该怎么写呢?

props: {
  content: [ String, Number ]
},

content的类型,可以用数组来表示。

content其实还有更复杂的用法:

props: {
  content: {
    type: Sring,
    required: true,         //必传
    default: 'default value',    //默认显示,非必传会显示
    validator(value){       //检测 content 的长度,如果长度大于 5,正常显示,如果长度小于 5 则报错 
      return (value.length > 5)
    }
  }
}

非props特性

说到非props特性,它一定和props特性相对应。

props特性:当你的父组件使用子组件的时候,通过属性向子组件传值的时候,恰好子组件里面声明了对父组件传递过来的属性的一个接收,也就是说父子组件有个对应关系,如果你这么写我们就把叫做props特性

props特性的特点是,如下图:

  1. 我们在子组件里有一个content的内容传递,这个属性的内容传递是不会在dom标签上进行显示的。
  2. 当你父组件传递了content,你子组件接收了这个content,你在模版里就可以直接通过插值表达式或者通过this.content,去取得content里面的内容了。

Vue 组件参数校验与非props特性的方法

props特性:父组件向子组件传递了一个属性,但是子组件并没有props这块的内容,也就是说子组件并没有声明我要接收父组件的传递过来的内容

props特点:

  • props特性在子组件里面,没办法获取到你父组件传递的内容,因为你压根没声明你要获取的内容,也就没法用。
  • 如果我们用的是非props特性,那么这个特性是会显示在dom标签上的

Vue 组件参数校验与非props特性的方法

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
正则表达式判断是否存在中文和全角字符和判断包含中文字符串长度
Sep 27 Javascript
onbeforeunload与onunload事件异同点总结
Jun 24 Javascript
JS调用页面表格导出excel示例代码
Mar 18 Javascript
JavaScript模拟实现键盘打字效果
Jun 29 Javascript
js实现精确到秒的日期选择器完整实例
Apr 30 Javascript
项目实践一图片上传之form表单还是base64前端图片压缩(前端图片压缩)
Jul 28 Javascript
servlet+jquery实现文件上传进度条示例代码
Jan 25 Javascript
Iscrool下拉刷新功能实现方法(推荐)
Jun 26 Javascript
图片文字识别(OCR)插件Ocrad.js教程
Nov 26 Javascript
JavaScript设计模式之命令模式实例分析
Jan 16 Javascript
vant中的toast层级改变操作
Nov 04 Javascript
JS前端可视化canvas动画原理及其推导实现
Aug 05 Javascript
从组件封装看Vue的作用域插槽的实现
Feb 12 #Javascript
用element的upload组件实现多图片上传和压缩的示例代码
Feb 12 #Javascript
PostgreSQL Node.js实现函数计算方法示例
Feb 12 #Javascript
Vue 动态组件与 v-once 指令的实现
Feb 12 #Javascript
在微信小程序中保存网络图片
Feb 12 #Javascript
VUE中使用MUI方法
Feb 12 #Javascript
如何利用ES6进行Promise封装总结
Feb 11 #Javascript
You might like
asp和php下textarea提交大量数据发生丢失的解决方法
2008/01/20 PHP
PHP中多维数组的foreach遍历示例
2014/06/13 PHP
php广告加载类用法实例
2014/09/23 PHP
php中file_get_contents与curl性能比较分析
2014/11/08 PHP
PHP实现的简单分页类及用法示例
2016/05/06 PHP
PHP导出带样式的Excel示例代码
2016/08/28 PHP
php监测数据是否成功插入到Mysql数据库的方法
2016/11/25 PHP
PHP实现动态压缩js与css文件的方法
2018/05/02 PHP
PHP框架实现WebSocket在线聊天通讯系统
2019/11/21 PHP
jQuery 全选效果实现代码
2009/03/23 Javascript
JavaScript 异步调用框架 (Part 1 - 问题 &amp; 场景)
2009/08/03 Javascript
JavaScript arguments 多参传值函数
2010/10/24 Javascript
为什么要在引入的css或者js文件后面加参数的详细讲解
2013/05/03 Javascript
js中数组Array的一些常用方法总结
2013/08/12 Javascript
JavaScript实现的SHA-1加密算法完整实例
2016/02/02 Javascript
javascript比较语义化版本号的实现代码
2016/09/09 Javascript
React styled-components设置组件属性的方法
2018/08/07 Javascript
vue实现键盘输入支付密码功能
2018/08/18 Javascript
vue 详情跳转至列表页实现列表页缓存
2019/03/27 Javascript
JS实现数据动态渲染的竖向步骤条
2020/06/24 Javascript
vue-i18n实现中英文切换的方法
2020/07/06 Javascript
vue实现图片按比例缩放问题操作
2020/08/11 Javascript
Python 文件读写操作实例详解
2014/03/12 Python
Python Queue模块详细介绍及实例
2016/12/27 Python
一步步教你用Python实现2048小游戏
2017/01/19 Python
python各层级目录下import方法代码实例
2020/01/20 Python
TensorFlow自定义损失函数来预测商品销售量
2020/02/05 Python
凯伦·米莲女装网上商店:Karen Millen
2017/11/07 全球购物
爱普生美国官网:Epson美国
2018/11/05 全球购物
EntityManager都有哪些方法
2013/11/01 面试题
幼师岗位求职简历的自荐信格式
2013/09/21 职场文书
2014党的群众路线教育实践活动总结材料
2014/10/31 职场文书
2014年汽车销售工作总结
2014/12/01 职场文书
仓库保管员岗位职责
2015/02/09 职场文书
部门2015年度工作总结
2015/04/29 职场文书
css 边框添加四个角的实现代码
2021/10/16 HTML / CSS