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 相关文章推荐
Flash对联广告的关闭按钮讨论
Jan 30 Javascript
node.js中的console用法总结
Dec 15 Javascript
浅谈javascript 迭代方法
Jan 21 Javascript
jQuery修改class属性和CSS样式整理
Jan 30 Javascript
浅谈Javascript中substr和substring的区别
Sep 30 Javascript
JS实现仿PS的调色板效果完整实例
Dec 21 Javascript
JS实现微信摇一摇原理解析
Jul 22 Javascript
详解如何在nuxt中添加proxyTable代理
Aug 10 Javascript
JQuery中queue方法用法示例
Jan 31 jQuery
js设置默认时间跨度过程详解
Jul 17 Javascript
ES6 新增的创建数组的方法(小结)
Aug 01 Javascript
解决layui中onchange失效以及form动态渲染失效的问题
Sep 27 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
再次研究下cache_lite
2007/02/14 PHP
UCenter Home二次开发指南
2009/05/28 PHP
php将远程图片保存到本地服务器的实现代码
2015/08/03 PHP
php 三大特点:封装,继承,多态
2017/02/19 PHP
详解阿里云视频直播PHP-SDK接入教程
2020/07/09 PHP
用JQuery 实现的自定义对话框
2007/03/24 Javascript
nodejs 后缀名判断限制代码
2011/03/31 NodeJs
javascript插入样式实现代码
2012/02/22 Javascript
javascript弹出拖动窗口
2015/08/11 Javascript
js实现索引图片切换效果
2015/11/21 Javascript
Bootstrap每天必学之警告框插件
2016/04/26 Javascript
javaScript中的原型解析【推荐】
2016/05/05 Javascript
jQuery实现鼠标经过时高亮,同时其他同级元素变暗的效果
2016/09/18 Javascript
Vue.JS项目中5个经典Vuex插件
2017/11/28 Javascript
Angular浏览器插件Batarang介绍及使用
2018/02/07 Javascript
VUE2 前端实现 静态二级省市联动选择select的示例
2018/02/09 Javascript
Vuex 在Vue 组件中获得Vuex 状态state的方法
2018/08/27 Javascript
小程序实现搜索界面 小程序实现推荐搜索列表效果
2019/05/18 Javascript
深入了解JavaScript 防抖和节流
2019/09/12 Javascript
《javascript设计模式》学习笔记一:Javascript面向对象程序设计对象成员的定义分析
2020/04/07 Javascript
JavaScript内置对象之Array的使用小结
2020/05/12 Javascript
Python中为feedparser设置超时时间避免堵塞
2014/09/28 Python
python基于BeautifulSoup实现抓取网页指定内容的方法
2015/07/09 Python
在Python的Django框架中加载模版的方法
2015/07/16 Python
Win10下Python环境搭建与配置教程
2016/11/18 Python
Python DataFrame.groupby()聚合函数,分组级运算
2018/09/18 Python
浅谈django 重载str 方法
2020/05/19 Python
在pycharm中关掉ipython console/PyDev操作
2020/06/09 Python
如何用Python绘制3D柱形图
2020/09/16 Python
Python读取图像并显示灰度图的实现
2020/12/01 Python
美国校服网上商店:French Toast
2019/10/08 全球购物
学前教育专业求职信
2014/09/02 职场文书
2014年企业工会工作总结
2014/11/12 职场文书
离婚协议书范文2015
2015/01/26 职场文书
茶楼服务员岗位职责
2015/02/09 职场文书
Vue.js中v-for指令的用法介绍
2022/03/13 Vue.js