分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 技术分享

vuejs组件参数校验

发布时间:2023-09-06 02:14责任编辑:白小东关键词:jsvuejs组件
父组件向子组件传递一些参数,那么子组件有权对这些参数进行一个校验,这个就是组件参数校验
需求:父组件传递过来的必须是个字符串,这个要怎么去校验呢
<div id=‘root‘>  <child content=‘hello world‘></child></div><script>Vue.component(‘child‘,{  props:{    content:String  },  template:‘<div>{{content}}</div>‘})var vm = new Vue({  el:‘#root‘})</script>
将接收的props定义称对象,并指定类型,不以数组的形式接收参数
接收的数据是字符串类型 或者 数组类型,,都可以
props:{  content:[String, Number]}
复杂的校验
<div id=‘root‘>  <child content=‘hello world‘></child></div><script>Vue.component(‘child‘,{  props:{    content:{      type:String,//数据类型      required:false,//是否是必传      default:‘default content‘,//如果没传值,默认值      validator:function(val){//自定义校验器,数据必须>5        return (val.length>5)      }    }  },  template:‘<div>{{content}}</div>‘})var vm = new Vue({  el:‘#root‘})</script>



props特性
父组件向子组件传递参数,子组件恰好声明了这个参数,进行接收
非props特性
父组件向子组件传递参数,子组件没有props这块内容,所以就会报错,不去接收,就没法使用这个content
第二个特点是,子组件没接收,对应的属性值会显示在标签中,props特性不会显示

vuejs组件参数校验

原文地址:https://www.cnblogs.com/wzndkj/p/9655015.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved